import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';

import { type AlignmentOption } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CertificateAlignmentOptionCardProps = {
  option: AlignmentOption;
  checked: boolean;
  onClick: () => void;
};

const CertificateAlignmentOptionCard = ({
  option,
  checked,
  onClick,
}: CertificateAlignmentOptionCardProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  const { value, Icon, label } = option;

  const color = palette.new.text.neutral.brand;

  return (
    <SelectionCard
      checked={checked}
      onClick={onClick}
      aria-label={label}
    >
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          gap: 1,
        }}
      >
        <Stack sx={{ p: 1 }}>
          <Icon
            size={24}
            color={color}
          />
        </Stack>
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
          color={color}
        >
          {t(`general:alignment.${value.toLowerCase()}`)}
        </Typography>
      </Stack>
    </SelectionCard>
  );
};

export default CertificateAlignmentOptionCard;
