import Avatar from '@design-system/Avatar';
import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import { LoadingButton } from '@mui/lab';
import { Stack } from '@mui/material';

import { type StateCardProps } from './types';
import { getColor, getDefaultIcon, toSxArray } from './utils';

const StateCard = ({
  title,
  description,
  primaryAction,
  secondaryAction,
  variant = 'primary',
  icon,
  slotProps,
}: StateCardProps) => {
  const defaultIcon = getDefaultIcon(variant);
  const color = getColor(variant);

  const { label: primaryLabel, ...primaryButtonProps } = primaryAction ?? {};
  const { label: secondaryLabel, ...secondaryButtonProps } =
    secondaryAction ?? {};

  return (
    <CardContainer
      fullWidth
      {...slotProps?.card}
    >
      <Stack
        {...slotProps?.container}
        sx={[
          {
            flexDirection: 'column',
            gap: 2,
            alignItems: 'center',
          },
          ...toSxArray(slotProps?.container?.sx),
        ]}
      >
        <Avatar
          color={color}
          Icon={icon ?? defaultIcon}
          {...slotProps?.avatar}
        />
        <Title
          title={title}
          description={description}
          variant="M"
          centered
          {...slotProps?.title}
        />
        {(primaryAction || secondaryAction) && (
          <Stack
            {...slotProps?.actionsContainer}
            sx={[
              { flexDirection: 'row', gap: 2 },
              ...toSxArray(slotProps?.actionsContainer?.sx),
            ]}
          >
            {secondaryAction && (
              <LoadingButton
                size="small"
                {...secondaryButtonProps}
              >
                {secondaryLabel}
              </LoadingButton>
            )}
            {primaryAction && (
              <LoadingButton
                size="small"
                variant="outlined"
                {...primaryButtonProps}
              >
                {primaryLabel}
              </LoadingButton>
            )}
          </Stack>
        )}
      </Stack>
    </CardContainer>
  );
};

export type { StateCardProps };

export default StateCard;