import {
  IconBolt,
  IconBulb,
  IconClock,
  IconLock,
  type TablerIcon,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

type FaqEntrySpec = {
  pillKey: string;
  questionKey: string;
  answerKey: string;
  icon: TablerIcon;
};

const FAQ_ENTRY_SPECS: FaqEntrySpec[] = [
  {
    pillKey: 'success.faq_basics',
    questionKey: 'success.faq_1_q',
    answerKey: 'success.faq_1_a',
    icon: IconBulb,
  },
  {
    pillKey: 'success.faq_basics',
    questionKey: 'success.faq_2_q',
    answerKey: 'success.faq_2_a',
    icon: IconBulb,
  },
  {
    pillKey: 'success.faq_costs',
    questionKey: 'success.faq_3_q',
    answerKey: 'success.faq_3_a',
    icon: IconLock,
  },
  {
    pillKey: 'success.faq_process',
    questionKey: 'success.faq_4_q',
    answerKey: 'success.faq_4_a',
    icon: IconClock,
  },
  {
    pillKey: 'success.faq_process',
    questionKey: 'success.faq_5_q',
    answerKey: 'success.faq_5_a',
    icon: IconClock,
  },
  {
    pillKey: 'success.faq_process',
    questionKey: 'success.faq_6_q',
    answerKey: 'success.faq_6_a',
    icon: IconClock,
  },
  {
    pillKey: 'success.faq_process',
    questionKey: 'success.faq_7_q',
    answerKey: 'success.faq_7_a',
    icon: IconClock,
  },
  {
    pillKey: 'success.faq_offers',
    questionKey: 'success.faq_8_q',
    answerKey: 'success.faq_8_a',
    icon: IconBolt,
  },
];

const RequestOfferFaqsSection = () => {
  const { t } = useLokaliseTranslation('loans');

  return (
    <Stack
      sx={{
        width: '100%',
        gap: 3,
        mb: '4rem',
      }}
    >
      <Stack sx={{ gap: 0.75 }}>
        <Typography
          variant="globalL"
          sx={{
            fontWeight: 'fontWeightBold',
            color: theme => theme.palette.new.text.neutral.default,
          }}
        >
          {t('success.faq_title')}
        </Typography>
        <Typography
          variant="globalS"
          sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
        >
          {t('success.faq_subtitle')}
        </Typography>
      </Stack>

      <Stack sx={{ gap: 1.5 }}>
        {FAQ_ENTRY_SPECS.map(entry => (
          <Accordion
            key={entry.questionKey}
            elevation={0}
            hasPadding
            defaultExpanded={false}
            avatar={{ Icon: entry.icon, color: 'primary' }}
            pill={{
              label: t(entry.pillKey),
              type: 'info',
              size: 'small',
              hasIcon: false,
            }}
            title={t(entry.questionKey)}
            customDetail={
              <Typography
                variant="globalS"
                sx={{
                  color: theme => theme.palette.new.text.neutral.lighter,
                  lineHeight: 1.55,
                  pt: 0.5,
                }}
              >
                {t(entry.answerKey)}
              </Typography>
            }
          />
        ))}
      </Stack>
    </Stack>
  );
};

export default RequestOfferFaqsSection;