import { type TablerIcon } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/styles';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';

export type StatCardProps = {
  title: string;
  Icon: TablerIcon;
  value?: string;
  loading?: boolean;
};

export const StatCard = ({
  title,
  Icon,
  value,
  loading = false,
}: StatCardProps) => {
  const { shadows } = useTheme();

  return (
    <CardContainer sx={{ boxShadow: shadows[1], width: 'initial' }}>
      <ListItem
        avatar={{ Icon }}
        text={{ copetin: title, title: value || '0' }}
        loading={loading}
        sx={{
          '& > li': { p: 0, '& > div': { gap: 1 } },
          ...(loading && { '& > div': { p: 0 } }),
        }}
      />
    </CardContainer>
  );
};