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

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

import HuAvatar, {
  type AvatarProps as HuAvatarProps,
} 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' | 'variant'
  >;
  avatarProps?: Pick<HuAvatarProps, 'Icon' | 'color'>;
  buttonProps?: {
    text: string;
    onClick: () => void;
  };
  sx?: SxProps<Theme>;
};

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

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

export default HuEmptyState;