"use client"
import { Card, CardContent } from "@/components/ui/card"
import { MarketingOffersList } from "./MarketingOffersList"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { useDisclosure } from "@/hooks/useDisclosure"
import AddOfferModal from "./AddOfferModal"
import { PageTitle } from "@/components/common/PageTitle"
import { useTranslations } from "next-intl"

export function MarketingMain() {
  const { isOpen, open, close } = useDisclosure()
  const t = useTranslations()

  return (
    <div>
      <div className="flex items-center justify-between mb-5">
        <PageTitle title={t("marketing.main.title")} />
        <Button
          onClick={open}
          className="flex items-center gap-2 px-4 py-3 rounded-sm  bg-primary-gradient text-white font-semibold shadow-none"
        >
          <Plus className="w-5 h-5 text-white" />
          {t("marketing.main.addOffer")}
        </Button>
      </div>
      <Card>
        <CardContent>
          <MarketingOffersList />
        </CardContent>
        <AddOfferModal open={isOpen} setOpen={close} />
      </Card>
    </div>
  )
}