import { ComponentProps, 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 Button from '@material-hu/components/design-system/Buttons/Button';
import HuTitle from '@material-hu/components/design-system/Title';

type EmptyStateProps = {
  titleProps: Pick<
    ComponentProps<typeof HuTitle>,
    'title' | 'description' | 'copetin'
  >;
  Icon?: typeof IconZoomExclamation;
  buttonProps?: {
    text: string;
    onClick: () => void;
  };
};

const EmptyState: FC<EmptyStateProps> = props => {
  const { titleProps, Icon, buttonProps } = props;

  return (
    <Stack
      sx={{
        alignItems: 'center',
        gap: 2,
        flex: 1,
        justifyContent: 'center',
        bgcolor: 'white',
        height: '210px',
        width: '100%',
      }}
    >
      <HuAvatar
        size="large"
        Icon={Icon || IconZoomExclamation}
      />
      <HuTitle
        variant="S"
        centered
        {...titleProps}
      />
      {buttonProps && (
        <Button
          variant="secondary"
          size="small"
          onClick={buttonProps.onClick}
        >
          {buttonProps.text}
        </Button>
      )}
    </Stack>
  );
};

export default EmptyState;