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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { CriteriaToSelect } from 'src/types/vacations';

type CriteriaCardProps = {
  criteria: CriteriaToSelect;
  onClick: () => void;
};

export const CriteriaCard = ({ criteria, onClick }: CriteriaCardProps) => {
  return (
    <HuCardContainer
      padding={0}
      sx={{
        width: '100%',
        '& .MuiButtonBase-root:hover': {
          backgroundColor: 'transparent',
        },
      }}
    >
      <HuListItem
        text={{
          description: criteria.subtitle,
          title: criteria.title,
        }}
        sidePill={
          criteria.pillTitle
            ? {
                label: criteria.pillTitle,
              }
            : undefined
        }
        action={{
          Icon: IconChevronRight,
        }}
        avatar={{ Icon: criteria.avatar }}
        onClick={onClick}
      />
    </HuCardContainer>
  );
};