import { CustomAccordion } from '@/components/ui/accordion'
import { Section } from '@/components/ui/section'
import { cn } from '@/lib/utils/cn'
import { FaqSection } from '@/payload-types'

interface Props extends FaqSection {
  isInfoPage?: boolean
}

export const FaQSection = ({ title, subtitle, items, isInfoPage }: Props) => {
  return (
    <Section sectionClass={cn(isInfoPage ? 'py-6' : 'py-30 min-h-[758px]')}>
      <div
        className={cn(
          'flex justify-between gap-y-14 gap-x-4 flex-col lg:flex-row lg:items-start items-center',
          isInfoPage && 'lg:flex-col',
        )}
      >
        <div className={cn('w-full lg:w-[387px]', isInfoPage && 'lg:w-full')}>
          <div className="text-base-white subheadline-semibold sm:h2 ">{title}</div>
          <div className="text-grey-200 b2-regular mt-4 pr-9">{subtitle}</div>
        </div>
        <div className={cn('w-full lg:w-[684px]', isInfoPage && 'lg:w-full')}>
          <CustomAccordion
            defaultValue="0"
            collapsible
            type="single"
            options={(items || []).map((item) => ({ value: item.answer, label: item.question }))}
          />
        </div>
      </div>
    </Section>
  )
}
