import Avatar from '@design-system/Avatar';
import CardContainer from '@design-system/CardContainer';
import Skeleton from '@design-system/Skeleton';
import Title from '@design-system/Title';
import { IconButton, Stack } from '@mui/material';
import { IconChevronRight, IconEdit, IconTrash } from '@tabler/icons-react';

import { type SummaryCardProps } from './types';

const SummaryCard = ({
  Icon,
  title,
  description,
  onEdit,
  onDelete,
  loading = false,
  disabled = false,
  withArrow = false,
  sx,
  slotProps = {},
}: SummaryCardProps) => {
  const {
    root: rootProps,
    avatar: avatarProps,
    title: titleProps,
    editButton: editButtonProps,
    deleteButton: deleteButtonProps,
  } = slotProps;

  const handleEdit = () => {
    onEdit?.();
  };

  const handleDelete = () => {
    onDelete?.();
  };

  return (
    <CardContainer
      sx={sx}
      fullWidth
      {...rootProps}
    >
      <Stack sx={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
        <Avatar
          Icon={Icon}
          {...avatarProps}
        />
        <Stack>
          <Title
            variant="S"
            title={title}
            description={!loading && description}
            {...titleProps}
          />
          {loading && <Skeleton sx={{ marginTop: 0.5 }} />}
        </Stack>
        <Stack
          sx={{
            flex: 1,
            gap: 0.5,
            alignItems: 'center',
            justifyContent: 'end',
            flexDirection: 'row',
          }}
        >
          {onEdit && (
            <IconButton
              variant="tertiary"
              onClick={handleEdit}
              {...editButtonProps}
              disabled={editButtonProps?.disabled || disabled}
            >
              <IconEdit />
            </IconButton>
          )}
          {onDelete && (
            <IconButton
              variant="tertiary"
              onClick={handleDelete}
              {...deleteButtonProps}
              disabled={deleteButtonProps?.disabled || disabled}
            >
              <IconTrash />
            </IconButton>
          )}
          {withArrow && <IconChevronRight />}
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default SummaryCard;