import { type TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';

export type BenefitRowProps = {
  Icon: TablerIcon;
  title: string;
  subtitle: string;
};

export const BenefitRow = ({ Icon, title, subtitle }: BenefitRowProps) => (
  <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
    <HuAvatar
      Icon={Icon}
      color="primary"
      sx={{ color: theme => theme.palette.new.icon.feedback.success }}
    />
    <Stack sx={{ gap: 0.25, minWidth: 0 }}>
      <Typography
        variant="globalXS"
        sx={{
          fontWeight: 'fontWeightBold',
          color: theme => theme.palette.new.text.neutral.default,
        }}
      >
        {title}
      </Typography>
      <Typography
        variant="globalXXS"
        sx={{
          color: theme => theme.palette.new.text.neutral.lighter,
        }}
      >
        {subtitle}
      </Typography>
    </Stack>
  </Stack>
);