import { ComponentProps, FC } from 'react';

import { IconZoomExclamation } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';

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'
  >;
  avatarProps: {
    Icon: typeof IconZoomExclamation;
    color?: 'warning' | 'default' | 'success';
  };
  buttonProps?: {
    text: string;
    onClick: () => void;
  };
  sx?: SxProps;
};

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

  return (
    <Stack
      sx={{
        alignItems: 'center',
        gap: 2,
        flex: 1,
        justifyContent: 'center',
        bgcolor: theme => theme.palette.new.background.layout.tertiary,
        height: '100%',
        width: '100%',
        p: 3,
        ...sx,
      }}
    >
      <HuAvatar
        size="large"
        {...avatarProps}
      />
      <HuTitle
        variant="L"
        centered
        sx={{ whiteSpace: 'pre-line' }}
        {...titleProps}
      />
      {buttonProps && (
        <Button
          variant="secondary"
          size="small"
          onClick={buttonProps.onClick}
        >
          {buttonProps.text}
        </Button>
      )}
    </Stack>
  );
};

export default EmptyState;