import { type FC } from 'react';

import {
  IconEdit,
  IconTrash,
  type TablerIcon,
} from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

type Props = {
  title: string;
  description: string;
  loadingDescription?: boolean;
  Icon: TablerIcon;
  avatarColor:
    | 'default'
    | 'primary'
    | 'highlight'
    | 'success'
    | 'error'
    | 'warning';
  onEdit: () => void;
  onDelete: () => void;
};

const InfoCard: FC<Props> = ({
  title,
  description,
  loadingDescription,
  Icon,
  avatarColor,
  onEdit,
  onDelete,
}) => {
  return (
    <HuCardContainer fullWidth>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', width: 1 }}>
        <HuAvatar
          Icon={Icon}
          color={avatarColor}
        />
        <Stack sx={{ flexDirection: 'column', flex: 1, ml: 2, mr: 2 }}>
          <HuTitle
            variant="S"
            title={title}
            description={
              loadingDescription ? <HuSkeleton width={320} /> : description
            }
          />
        </Stack>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          <IconButton onClick={onEdit}>
            <IconEdit />
          </IconButton>
          <IconButton onClick={onDelete}>
            <IconTrash />
          </IconButton>
        </Stack>
      </Stack>
    </HuCardContainer>
  );
};

export default InfoCard;