import { type FC } from 'react';

import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { type FaqItem } from 'src/types/prode';

import { getStaggerAnimationSx } from '../constants';

type FAQAccordionProps = {
  faqItems: FaqItem[];
};

const FAQAccordion: FC<FAQAccordionProps> = ({ faqItems }) => {
  if (!faqItems || faqItems.length === 0) {
    return null;
  }

  return (
    <Stack sx={{ gap: 1.5 }}>
      {faqItems.map((item, index) => (
        <Box
          key={index}
          sx={getStaggerAnimationSx(index)}
        >
          <HuAccordion
            title={item.question}
            elevation={0}
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.elements.default,
              borderRadius: 2,
              minHeight: 72,
              '& .MuiAccordionSummary-root': {
                padding: 2,
                minHeight: 72,
              },
            }}
            customDetail={
              <Typography
                variant="globalXS"
                sx={{ color: 'new.text.neutral.lighter' }}
              >
                {item.answer}
              </Typography>
            }
          />
        </Box>
      ))}
    </Stack>
  );
};

export default FAQAccordion;
