import { useQuery } from "react-query"
import { Skeleton } from "@chakra-ui/react"
import { motion } from "framer-motion"

import { getVariantPromoByCategory } from "~/services/variant"

import { useModalStore } from "../stores/useModalStore"
import ProductPromoCard from "./Card"

const ProductPromoModalContent = () => {
  const { activeTab, variantId } = useModalStore()

  const promotionsQuery = useQuery(
    `variant-promo:${variantId}:${activeTab}`,
    async () => {
      if (!variantId) return

      return getVariantPromoByCategory(variantId, activeTab)
    },
  )

  const promotions = promotionsQuery.data

  return (
    <Skeleton isLoaded={!promotionsQuery.isLoading} className='min-h-[60vh] grid grid-cols-1'>
      {promotions?.data.map((promo) => (
        <ProductPromoCard key={promo.id} promotion={promo} />
      ))}
    </Skeleton>
  )
}

export default ProductPromoModalContent