"use client";

import { useState } from "react";
import { Gift, Mail, Sparkles } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { StoreShell } from "@/components/store-shell";
import { formatPrice } from "@/lib/commerce";

export function GiftCardPageClient({ categories }: { categories: string[] }) { const amounts = [250000, 500000, 1000000, 2000000]; const [amount, setAmount] = useState(amounts[1]); return <StoreShell categories={categories}><div className="container-shell grid gap-6 py-10 lg:grid-cols-[1fr_440px]"><section className="relative min-h-[440px] overflow-hidden rounded-[32px] bg-gradient-to-bl from-[var(--shop-navy)] via-emerald-800 to-[var(--shop-primary)] p-8 text-white md:p-12"><div className="absolute -left-20 -top-20 h-72 w-72 rounded-full bg-emerald-300/20 blur-3xl" /><div className="relative"><span className="grid h-16 w-16 place-items-center rounded-2xl bg-white/10"><Gift className="h-8 w-8" /></span><p className="mt-16 text-sm font-bold text-emerald-100">کارت هدیه دیجیتال barzinmarket</p><h1 className="mt-4 text-4xl font-black leading-[1.55] md:text-5xl">هدیه‌ای که خودش انتخاب می‌کند</h1><p className="mt-4 max-w-lg leading-8 text-slate-100">کارت هدیه در چند دقیقه به ایمیل گیرنده فرستاده می‌شود و برای خرید همه کالاها قابل استفاده است.</p><div className="mt-10 text-3xl font-black">{formatPrice(amount)} <span className="text-base">تومان</span></div></div></section><section className="rounded-[28px] border bg-white p-6 dark:bg-slate-900"><h2 className="text-xl font-black">ساخت کارت هدیه</h2><div className="mt-6 grid grid-cols-2 gap-2">{amounts.map((value) => <button key={value} onClick={() => setAmount(value)} className={`rounded-xl border p-3 text-sm font-black ${amount === value ? "border-[var(--shop-primary)] bg-emerald-50 text-[var(--shop-primary)]" : ""}`}>{formatPrice(value)} تومان</button>)}</div><div className="mt-5 space-y-4"><div><Label>نام گیرنده</Label><Input className="mt-2" /></div><div><Label>ایمیل گیرنده</Label><div className="relative mt-2"><Mail className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" /><Input type="email" className="pr-10" /></div></div><div><Label>پیام شما</Label><Textarea className="mt-2" placeholder="یک پیام کوتاه برای هدیه…" /></div><Button className="h-12 w-full" onClick={() => toast.info("پرداخت کارت هدیه پس از اتصال درگاه فعال می‌شود")}><Sparkles className="ml-2 h-5 w-5" />ادامه و پرداخت</Button></div></section></div></StoreShell>; }