"use client";

import { useTranslations } from "next-intl";
import { OfferCard } from "@/components/offer-card";
import { AnimatedList } from "@/components/ui/animated-list";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { buyOffers, sellOffers } from "@/lib/mock-data";

export function MarketOffers() {
  const t = useTranslations("home.offers");

  return (
    <section className="py-20 bg-background">
      <div className="container">
        <h2 className="text-4xl font-bold text-center mb-12">
          Ofertas do Mercado
        </h2>

        <Tabs defaultValue="buying" className="w-full">
          <TabsList className="grid w-full max-w-md mx-auto grid-cols-2">
            <TabsTrigger value="buying">{t("buying")}</TabsTrigger>
            <TabsTrigger value="selling">{t("selling")}</TabsTrigger>
          </TabsList>

          <TabsContent value="buying" className="mt-8">
            <AnimatedList>
              {buyOffers.map((offer) => (
                <OfferCard key={offer.id} offer={offer} />
              ))}
            </AnimatedList>
          </TabsContent>

          <TabsContent value="selling" className="mt-8">
            <AnimatedList>
              {sellOffers.map((offer) => (
                <OfferCard key={offer.id} offer={offer} />
              ))}
            </AnimatedList>
          </TabsContent>
        </Tabs>
      </div>
    </section>
  );
}