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

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

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

type PlanNoActiveStateProps = {
  onRequestOffer: () => void;
};

const PlanNoActiveState = ({ onRequestOffer }: PlanNoActiveStateProps) => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Stack sx={{ width: '100%', minWidth: 0 }}>
      <StateCard
        variant="warning"
        icon={IconLock}
        title={t('status.no_active_plan_title')}
        description={t('status.no_active_plan_message')}
        primaryAction={{
          label: t('status.no_active_plan_cta'),
          onClick: onRequestOffer,
        }}
        slotProps={{
          card: {
            sx: {
              width: '100%',
              py: 4,
            },
          },
        }}
      />
    </Stack>
  );
};

export default PlanNoActiveState;