import { type ComponentProps, type FC } from 'react';

import { IconZoomExclamation } from '@material-hu/icons/tabler';
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 HuTitle from '@material-hu/components/design-system/Title';

type Props = {
  titleProps: Pick<
    ComponentProps<typeof HuTitle>,
    'title' | 'description' | 'copetin'
  >;
  sx?: ComponentProps<typeof HuCardContainer>['sx'];
  Icon?: typeof IconZoomExclamation;
};

export const EmptyState: FC<Props> = ({ titleProps, sx, Icon }) => {
  return (
    <HuCardContainer sx={{ width: '100%', ...sx }}>
      <Stack sx={{ alignItems: 'center', gap: 1 }}>
        <HuAvatar
          size="large"
          Icon={Icon || IconZoomExclamation}
        />
        <HuTitle
          variant="S"
          centered
          {...titleProps}
        />
      </Stack>
    </HuCardContainer>
  );
};

export default EmptyState;