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 HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';
import HuTitle from '@material-hu/components/design-system/Title';

type Props = {
  titleProps: Pick<
    ComponentProps<typeof HuTitle>,
    'title' | 'description' | 'copetin'
  >;
  totalColumns: number;
};

export const EmptyTableState: FC<Props> = ({ titleProps, totalColumns }) => {
  return (
    <HuTableRow>
      <HuTableCell colSpan={totalColumns}>
        <Stack sx={{ alignItems: 'center', gap: 1 }}>
          <HuAvatar
            size="large"
            Icon={IconZoomExclamation}
          />
          <HuTitle
            variant="S"
            centered
            {...titleProps}
          />
        </Stack>
      </HuTableCell>
    </HuTableRow>
  );
};

export default EmptyTableState;