import { FC } from 'react';
import { Trans } from 'react-i18next';

import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from './i18n';

export type FiltersDialogProps = {
  Icon: React.ElementType;
  transValues: Record<string, string | number>;
  i18nKey: string;
  sx?: Record<string, any>;
};

export const EventCardItem: FC<FiltersDialogProps> = props => {
  const { Icon, transValues, i18nKey, sx } = props;

  const { t } = useTranslation();

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        mb: 1,
      }}
    >
      <Icon
        fontSize="small"
        sx={{ mr: 0.5 }}
      />
      <Typography sx={{ ...sx }}>
        <Trans
          i18nKey={i18nKey}
          values={transValues}
          t={t}
          components={{ bold: <strong /> }}
        />
      </Typography>
    </Box>
  );
};

export default EventCardItem;