import { FC } from 'react';

import { IconChartBarPopular } from '@material-hu/icons/tabler';

import { StateCard } from '@material-hu/components/composed-components/StateCard';
import { StreamStatus } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

type EmptyStateProps = {
  streamStatus: StreamStatus;
  onButtonClick: (props: Partial<unknown>) => void;
};

const EmptyState: FC<EmptyStateProps> = props => {
  const { streamStatus, onButtonClick } = props;
  const { t } = useLokaliseTranslation('livestream');

  return (
    <StateCard
      slotProps={{
        root: {
          sx: {
            p: 0,
            '&.MuiStack-root': {
              gap: 1,
            },
          },
        },
        avatar: {
          Icon: IconChartBarPopular,
          size: 'medium',
          color: 'primary',
          sx: {
            mt: 5,
          },
        },
        title: {
          title:
            streamStatus === StreamStatus.Finished
              ? t('polls.empty.title_finished')
              : t('polls.empty.title'),
          description:
            streamStatus === StreamStatus.Finished
              ? t('polls.empty.description_finished')
              : t('polls.empty.description'),
          sx: {
            mb: 4,
          },
        },
        ...(streamStatus !== StreamStatus.Finished && {
          button: {
            children: t('polls.create'),
            fullWidth: true,
            variant: 'secondary',
            size: 'large',
            onClick: onButtonClick,
          },
        }),
      }}
      cardContained={false}
    />
  );
};

export default EmptyState;