'use client'

import React from 'react'
import { SectionLabel, Text } from '@/components/ui'
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'
import { cn } from '@/lib/utils'
import { MinusIcon, PlusIcon } from '@/app/assets/svg/icon'
import type { FaqItem } from '@/types/about'
import { useIsRtl } from '@/lib/use-is-rtl'

interface FaqProps {
  badge: string
  title: string
  description: string
  items: FaqItem[]
}

export const Faq = ({ badge, title, description, items }: FaqProps) => {
  const isRtl = useIsRtl()

  return (
    <section className='bg-white stack'>
      <div className='container'>
        <div className='flex flex-col lg:flex-row gap-10 lg:gap-[100px]'>
          <div className='shrink-0'>
            <SectionLabel
              label={badge}
              title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="text-secondary">') }} />}
              titleClassName='max-w-[20rem]'
              descriptionClassName='max-w-[31rem]'
              description={description}
            />
          </div>

          <div className='flex-1'>
            <Accordion defaultValue={[0]}>
              {items.map((item, i) => (
                <AccordionItem key={`${item.faq_question}-${i}`} value={i} className={cn('border-b border-[#DFDFDF] py-4')}>
                  <AccordionTrigger
                    className={cn(
                      isRtl ? 'text-right' : 'text-left',
                      'hover:no-underline cursor-pointer',
                      '[&_[data-slot=accordion-trigger-icon]]:hidden',
                      'group',
                    )}
                  >
                    <Text size='body' fontWeight={700}>{item.faq_question}</Text>
                    <span className={cn(isRtl ? 'mr-auto' : 'ml-auto', 'shrink-0 group-aria-expanded:hidden')}><PlusIcon /></span>
                    <span className={cn(isRtl ? 'mr-auto' : 'ml-auto', 'shrink-0 hidden group-aria-expanded:inline')}><MinusIcon /></span>
                  </AccordionTrigger>
                  <AccordionContent>
                    <div
                      className='text-sm lg:text-base xl:text-lg text-primary'
                      dangerouslySetInnerHTML={{ __html: item.faq_answer }}
                    />
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  )
}