'use client'

import { ReviewsCard } from '@/components/shared/cards/reviewsCard'
import ModalRadix from '@/components/shared/ModalRadix'
import ModalReviewSlider from '@/components/shared/slider/ModalReviewSlider'
import { Slider } from '@/components/shared/slider/Slider'
import { Media, News } from '@/payload-types'
import { useState } from 'react'

export const ReviewsSectionClient = ({ docs }: { docs: News[] }) => {
  const [activeId, setActiveId] = useState<string | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleShowCard = (id: string) => {
    setActiveId(id)
    setIsModalOpen(true)
  }
  const handleCloseModal = () => {
    setIsModalOpen(false)
    setActiveId(null)
  }

  return (
    <>
      <Slider
        itemWidth={460}
        items={docs.map((doc) => (
          <ReviewsCard
            text={doc.subtitle}
            title={doc.title}
            image={doc.image as Media}
            key={doc.id}
            onClick={() => handleShowCard(doc.id)}
            type="button"
          />
        ))}
        gap={16}
      />
      <ModalRadix open={isModalOpen} onClose={handleCloseModal}>
        {activeId && (
          <ModalReviewSlider cards={docs} initialId={activeId} totalCount={docs.length} />
        )}
      </ModalRadix>
    </>
  )
}
