import { IconEye } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import HuPills from '@material-hu/components/design-system/Pills';

import { useLokaliseTranslation } from 'src/utils/i18n';

type CalibrationAnswerPillProps = {
  showPill?: boolean;
  onEyeClick?: () => void;
};

const CalibrationAnswerPill = ({
  showPill = true,
  onEyeClick,
}: CalibrationAnswerPillProps) => {
  const { t } = useLokaliseTranslation('performance');

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
      }}
    >
      {showPill && (
        <HuPills
          label={t('calibration.detail.answer_pill')}
          size="medium"
          type="info"
          hasIcon={false}
          sx={{ textTransform: 'none' }}
        />
      )}
      <IconButton
        variant="secondary"
        onClick={onEyeClick}
        disabled={!onEyeClick}
      >
        <IconEye />
      </IconButton>
    </Stack>
  );
};

export default CalibrationAnswerPill;