import { useCallback, useState } from "react"
import { useGetOffers } from "@/lib/react-query/hooks/offers"
import { Offer } from "@/types/offers"
import EditOfferModal from "./EditOfferModal"
import { OfferCard, OfferCardSkeleton } from "./OfferCard"
import { OfferListEmptyState } from "./OfferListEmptyState"

export function MarketingOffersList() {
  const { data: offers, isLoading } = useGetOffers()
  const [editModalOpen, setEditModalOpen] = useState(false)
  const [selectedOffer, setSelectedOffer] = useState<Offer | null>(null)

  const handleEditOffer = useCallback((offer: Offer) => {
    setSelectedOffer(offer)
    setEditModalOpen(true)
  }, [])

  if (isLoading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <OfferCardSkeleton key={i} />
        ))}
      </div>
    )
  }

  if (!offers || offers.length === 0) {
    return <OfferListEmptyState />
  }

  return (
    <>
      <div className="space-y-4">
        {offers.map(offer => (
          <OfferCard key={offer._id} offer={offer} onEdit={handleEditOffer} />
        ))}
      </div>
      <EditOfferModal open={editModalOpen} setOpen={setEditModalOpen} offer={selectedOffer} />
    </>
  )
}