import { cardContentClasses } from '@material-hu/mui/CardContent';
import Radio from '@material-hu/mui/Radio';
import Stack from '@material-hu/mui/Stack';

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import { type SelectionCardProps } from '@material-hu/components/composed-components/SelectionCard/types';
import Pill from '@material-hu/components/design-system/Pills';
import Title, {
  type TitleProps,
} from '@material-hu/components/design-system/Title';

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

type RadioCalcMethodProps = Pick<
  SelectionCardProps,
  'checked' | 'onClick' | 'disabled'
> &
  Pick<TitleProps, 'title' | 'description'> & {
    isMoreUsed?: boolean;
  };

const RadioCalcMethod = ({
  isMoreUsed = false,
  title,
  description,
  ...props
}: RadioCalcMethodProps) => {
  const { t } = useLokaliseTranslation('people_experience');
  const { checked } = props;
  return (
    <SelectionCard
      {...props}
      sx={{
        [`& .${cardContentClasses.root}`]: {
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        },
      }}
      fullWidth
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'flex-start',
          gap: 0.25,
        }}
      >
        <Radio
          sx={{ p: 0, mt: '1.5px' }}
          size="small"
          checked={checked}
          disabled={props.disabled}
        />
        <Title
          title={title}
          description={description}
          fontWeight="fontWeightRegular"
          variant="S"
        />
      </Stack>
      {isMoreUsed && (
        <Pill
          label={t('most_used')}
          type="success"
          size="small"
          hasIcon={false}
        />
      )}
    </SelectionCard>
  );
};

export default RadioCalcMethod;