import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, Check, Loader2, MapPin, Store, User, Wrench } from "lucide-react";
import { ConnectLogo } from "@/components/site/ConnectLogo";
import { Card, Field, inputClass } from "@/components/partner/PartnerShell";
import {
  BRANDS,
  BUSINESS_TYPES,
  INDIVIDUAL_SERVICES,
  SERVICE_TREE,
  SHOWROOM_BUSINESS_MODES,
  SHOWROOM_TYPES,
  VEHICLE_TYPES,
  WEEKDAYS,
  defaultHours,
  isValidGst,
  isValidMobile,
  isValidPincode,
  type BusinessType,
} from "@/lib/partner-catalog";
import { getDraft, saveDraft, submitRegistration } from "@/lib/partner.functions";

export const Route = createFileRoute("/_partner/partner-register")({
  head: () => ({
    meta: [
      { title: "Partner Registration — Airfis" },
      {
        name: "description",
        content: "Complete your Airfis partner registration in three quick steps.",
      },
      { property: "og:title", content: "Partner Registration — Airfis" },
      {
        property: "og:description",
        content: "Add your business, location and services to go live on Airfis.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: PartnerRegister,
});

type Form = {
  businessType: BusinessType | "";
  businessName: string;
  shopName: string;
  ownerName: string;
  email: string;
  phone: string;
  imageUrl: string;
  address: string;
  city: string;
  pincode: string;
  latitude: number | null;
  longitude: number | null;
  gstNumber: string;
  serviceRadiusKm: number;
  is24x7: boolean;
  hours: Record<string, { open: string; close: string; closed: boolean }>;
  showroomType: string;
  brands: string[];
  businessMode: string;
  serviceSelection: Record<string, string[]>;
  servicePrices: Record<string, string>;
  individual: Record<
    string,
    {
      enabled: boolean;
      vehicleType: string;
      chargePerKm: string;
      towCapacity: string;
      baseCharge: string;
    }
  >;
};

const EMPTY: Form = {
  businessType: "",
  businessName: "",
  shopName: "",
  ownerName: "",
  email: "",
  phone: "",
  imageUrl: "",
  address: "",
  city: "",
  pincode: "",
  latitude: null,
  longitude: null,
  gstNumber: "",
  serviceRadiusKm: 10,
  is24x7: false,
  hours: defaultHours(),
  showroomType: "",
  brands: [],
  businessMode: "",
  serviceSelection: {},
  servicePrices: {},
  individual: {},
};

const TYPE_ICON = { showroom: Store, shop: Wrench, individual: User } as const;

function PartnerRegister() {
  const navigate = useNavigate();
  const [step, setStep] = useState(0);
  const [form, setForm] = useState<Form>(EMPTY);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [done, setDone] = useState(false);

  useEffect(() => {
    getDraft()
      .then((draft) => {
        if (draft?.data) {
          setForm((f) => ({ ...f, ...(draft.data as Partial<Form>) }));
          if (draft?.step) setStep(Math.min(draft.step, 2));
        } else {
          // No draft — prefill from the signup details stored during OTP login.
          try {
            const raw = sessionStorage.getItem("airfis_signup");
            if (raw) {
              const su = JSON.parse(raw) as { phone?: string; name?: string; email?: string };
              setForm((f) => ({
                ...f,
                phone: f.phone || su.phone || "",
                ownerName: f.ownerName || su.name || "",
                email: f.email || su.email || "",
              }));
            }
          } catch {
            // storage unavailable
          }
        }
      })
      .catch(() => undefined)
      .finally(() => setLoaded(true));
  }, []);

  function set<K extends keyof Form>(key: K, value: Form[K]) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  function persist(nextStep: number) {
    void saveDraft({
      data: { step: nextStep, data: form as unknown as Record<string, unknown> },
    }).catch(() => undefined);
  }

  function next() {
    setError("");
    if (step === 0) {
      if (!form.businessType) return setError("Choose the type of business you run.");
    }
    if (step === 1) {
      if (form.businessName.trim().length < 3)
        return setError("Enter your registered business name.");
      if (form.ownerName.trim().length < 3)
        return setError("Enter the owner or contact person name.");
      if (!isValidMobile(form.phone))
        return setError("Enter a valid 10-digit business phone number.");
      if (form.address.trim().length < 6) return setError("Enter your full address.");
      if (form.city.trim().length < 2) return setError("Enter your city.");
      if (!isValidPincode(form.pincode)) return setError("Enter a valid 6-digit pincode.");
      if (form.gstNumber && !isValidGst(form.gstNumber))
        return setError("That GST number doesn't look right.");
    }
    const target = Math.min(step + 1, 2);
    setStep(target);
    persist(target);
  }

  function back() {
    setError("");
    const target = Math.max(step - 1, 0);
    setStep(target);
    persist(target);
  }

  function buildServices() {
    if (form.businessType === "individual") {
      return Object.entries(form.individual)
        .filter(([, v]) => v.enabled)
        .map(([id, v]) => {
          const meta = INDIVIDUAL_SERVICES.find((s) => s.id === id);
          return {
            category: meta?.label ?? id,
            vehicleTypes: v.vehicleType ? [v.vehicleType] : [],
            price: v.chargePerKm
              ? Number(v.chargePerKm)
              : v.baseCharge
                ? Number(v.baseCharge)
                : null,
            priceUnit: v.chargePerKm ? "per km" : "flat",
          };
        });
    }
    if (form.businessType === "shop") {
      return Object.entries(form.serviceSelection)
        .filter(
          ([category, options]) =>
            options.length > 0 ||
            SERVICE_TREE.find((s) => s.category === category)?.options.length === 0,
        )
        .map(([category, options]) => ({
          category,
          vehicleTypes: options,
          price: form.servicePrices[category] ? Number(form.servicePrices[category]) : null,
          priceUnit: "flat",
        }));
    }
    return form.brands.map((brand) => ({
      category: `${form.businessMode || "Sales"} — ${brand}`,
      vehicleTypes: [],
      price: null,
      priceUnit: null,
    }));
  }

  async function submit() {
    setError("");
    if (form.businessType === "showroom" && (!form.showroomType || form.brands.length === 0)) {
      return setError("Select your showroom type and at least one brand.");
    }
    const services = buildServices();
    if (form.businessType !== "showroom" && services.length === 0) {
      return setError("Select at least one service you offer.");
    }

    setBusy(true);
    try {
      await submitRegistration({
        data: {
          payload: {
            businessType: form.businessType,
            businessName: form.businessName.trim(),
            shopName: form.shopName.trim() || form.businessName.trim(),
            ownerName: form.ownerName.trim(),
            email: form.email.trim() || undefined,
            imageUrl: form.imageUrl.trim() || undefined,
            address: form.address.trim(),
            city: form.city.trim(),
            pincode: form.pincode,
            latitude: form.latitude,
            longitude: form.longitude,
            gstNumber: form.gstNumber.toUpperCase() || undefined,
            serviceRadiusKm: form.serviceRadiusKm,
            is24x7: form.is24x7,
            hours: form.hours,
            services,
            extra: {
              contactPhone: form.phone,
              showroomType: form.showroomType,
              brands: form.brands,
              businessMode: form.businessMode,
            },
          },
        },
      });
      setDone(true);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Could not submit your registration");
    } finally {
      setBusy(false);
    }
  }

  function useMyLocation() {
    if (typeof navigator === "undefined" || !navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        set("latitude", Number(pos.coords.latitude.toFixed(6)));
        set("longitude", Number(pos.coords.longitude.toFixed(6)));
      },
      () => setError("We couldn't read your location. Enter coordinates manually."),
    );
  }

  if (done) {
    return (
      <div className="min-h-screen bg-[#f6f6f7] flex items-center justify-center px-4">
        <Card className="max-w-lg text-center">
          <div className="mx-auto inline-flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
            <Check className="h-7 w-7" />
          </div>
          <h2 className="mt-5 text-2xl font-bold text-ink">Registration submitted</h2>
          <p className="mt-2 text-sm text-ink-2">
            Our team reviews new partners within one business day. You can explore your console now
            — approval status is shown on your dashboard.
          </p>
          <button
            type="button"
            onClick={() => navigate({ to: "/partner/dashboard", replace: true })}
            className="btn-brand mt-6 inline-flex items-center gap-2"
          >
            Go to dashboard <ArrowRight className="h-4 w-4" />
          </button>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#f6f6f7]">
      <header className="bg-white border-b border-hairline">
        <div className="container-airfis flex h-[68px] items-center justify-between">
          <Link to="/select-user" className="inline-flex">
            <ConnectLogo className="h-9 w-auto" />
          </Link>
          <span className="text-sm text-ink-2">Partner registration</span>
        </div>
      </header>

      <div className="container-airfis py-8 max-w-3xl">
        <div className="flex items-center gap-3">
          {["Business type", "Business info", "Services"].map((label, i) => (
            <div key={label} className="flex flex-1 items-center gap-3">
              <div
                className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                  i <= step
                    ? "bg-[#FF4308] text-white"
                    : "bg-white text-ink-3 border border-hairline"
                }`}
              >
                {i < step ? <Check className="h-4 w-4" /> : i + 1}
              </div>
              <span
                className={`text-xs font-semibold hidden sm:block ${i <= step ? "text-ink" : "text-ink-3"}`}
              >
                {label}
              </span>
              {i < 2 && (
                <div className={`h-px flex-1 ${i < step ? "bg-[#FF4308]" : "bg-hairline"}`} />
              )}
            </div>
          ))}
        </div>

        {!loaded ? (
          <Card className="mt-6 flex items-center justify-center py-16">
            <Loader2 className="h-5 w-5 animate-spin text-ink-3" />
          </Card>
        ) : (
          <Card className="mt-6">
            {step === 0 && (
              <div>
                <h2 className="text-xl font-bold text-ink">
                  What kind of business are you registering?
                </h2>
                <p className="mt-1.5 text-sm text-ink-2">
                  This decides the details we ask for next.
                </p>
                <div className="mt-6 grid gap-3">
                  {BUSINESS_TYPES.map((t) => {
                    const Icon = TYPE_ICON[t.id];
                    const active = form.businessType === t.id;
                    return (
                      <button
                        key={t.id}
                        type="button"
                        onClick={() => set("businessType", t.id)}
                        className={`flex items-start gap-4 rounded-2xl border p-4 text-left transition-all ${
                          active
                            ? "border-[#FF4308] bg-[#FF4308]/5 shadow-[0_10px_30px_-18px_rgba(255,67,8,0.9)]"
                            : "border-hairline hover:border-ink-3"
                        }`}
                      >
                        <span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#f3f3f3] text-[#0a0a12]">
                          <Icon className="h-5 w-5" />
                        </span>
                        <span>
                          <span className="block font-bold text-ink">{t.label}</span>
                          <span className="mt-0.5 block text-sm text-ink-2">{t.blurb}</span>
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {step === 1 && (
              <div className="space-y-5">
                <div>
                  <h2 className="text-xl font-bold text-ink">Business information</h2>
                  <p className="mt-1.5 text-sm text-ink-2">
                    Customers see this on your Airfis listing.
                  </p>
                </div>
                <div className="grid sm:grid-cols-2 gap-4">
                  <Field label="Business name">
                    <input
                      className={inputClass}
                      value={form.businessName}
                      onChange={(e) => set("businessName", e.target.value)}
                    />
                  </Field>
                  <Field label="Shop / display name">
                    <input
                      className={inputClass}
                      value={form.shopName}
                      onChange={(e) => set("shopName", e.target.value)}
                    />
                  </Field>
                  <Field label="Owner name">
                    <input
                      className={inputClass}
                      value={form.ownerName}
                      onChange={(e) => set("ownerName", e.target.value)}
                    />
                  </Field>
                  <Field label="Business phone">
                    <input
                      inputMode="numeric"
                      className={inputClass}
                      value={form.phone}
                      onChange={(e) => set("phone", e.target.value.replace(/\D/g, "").slice(0, 10))}
                    />
                  </Field>
                  <Field label="Email (optional)">
                    <input
                      type="email"
                      className={inputClass}
                      value={form.email}
                      onChange={(e) => set("email", e.target.value)}
                    />
                  </Field>
                  <Field label="GST number (optional)">
                    <input
                      className={inputClass}
                      value={form.gstNumber}
                      onChange={(e) => set("gstNumber", e.target.value.toUpperCase())}
                    />
                  </Field>
                  <Field
                    label="Business image URL (optional)"
                    hint="A storefront photo helps customers find you."
                  >
                    <input
                      className={inputClass}
                      value={form.imageUrl}
                      onChange={(e) => set("imageUrl", e.target.value)}
                    />
                  </Field>
                  <Field label="City">
                    <input
                      className={inputClass}
                      value={form.city}
                      onChange={(e) => set("city", e.target.value)}
                    />
                  </Field>
                  <Field label="Pincode">
                    <input
                      inputMode="numeric"
                      className={inputClass}
                      value={form.pincode}
                      onChange={(e) =>
                        set("pincode", e.target.value.replace(/\D/g, "").slice(0, 6))
                      }
                    />
                  </Field>
                  <Field label="Service radius (km)">
                    <input
                      type="number"
                      min={1}
                      max={100}
                      className={inputClass}
                      value={form.serviceRadiusKm}
                      onChange={(e) => set("serviceRadiusKm", Number(e.target.value))}
                    />
                  </Field>
                </div>
                <Field label="Full address">
                  <textarea
                    rows={3}
                    className={inputClass}
                    value={form.address}
                    onChange={(e) => set("address", e.target.value)}
                  />
                </Field>

                <div className="rounded-2xl border border-hairline p-4">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <p className="font-semibold text-ink text-sm">Map location</p>
                      <p className="text-xs text-ink-2">
                        {form.latitude != null
                          ? `${form.latitude}, ${form.longitude}`
                          : "Not set yet"}
                      </p>
                    </div>
                    <button
                      type="button"
                      onClick={useMyLocation}
                      className="btn-ghost inline-flex items-center gap-2 text-sm"
                    >
                      <MapPin className="h-4 w-4" /> Use my location
                    </button>
                  </div>
                  <div className="mt-3 grid grid-cols-2 gap-3">
                    <input
                      placeholder="Latitude"
                      className={inputClass}
                      value={form.latitude ?? ""}
                      onChange={(e) =>
                        set("latitude", e.target.value ? Number(e.target.value) : null)
                      }
                    />
                    <input
                      placeholder="Longitude"
                      className={inputClass}
                      value={form.longitude ?? ""}
                      onChange={(e) =>
                        set("longitude", e.target.value ? Number(e.target.value) : null)
                      }
                    />
                  </div>
                </div>

                <div className="rounded-2xl border border-hairline p-4">
                  <label className="flex items-center gap-3">
                    <input
                      type="checkbox"
                      checked={form.is24x7}
                      onChange={(e) => set("is24x7", e.target.checked)}
                      className="h-4 w-4 accent-[#FF4308]"
                    />
                    <span className="text-sm font-semibold text-ink">Open 24x7</span>
                  </label>
                  {!form.is24x7 && (
                    <div className="mt-4 space-y-2">
                      {WEEKDAYS.map((day) => {
                        const h = form.hours[day]!;
                        return (
                          <div key={day} className="flex flex-wrap items-center gap-3">
                            <span className="w-24 text-sm text-ink-2">{day}</span>
                            <input
                              type="time"
                              value={h.open}
                              disabled={h.closed}
                              className={`${inputClass} w-32`}
                              onChange={(e) =>
                                set("hours", {
                                  ...form.hours,
                                  [day]: { ...h, open: e.target.value },
                                })
                              }
                            />
                            <input
                              type="time"
                              value={h.close}
                              disabled={h.closed}
                              className={`${inputClass} w-32`}
                              onChange={(e) =>
                                set("hours", {
                                  ...form.hours,
                                  [day]: { ...h, close: e.target.value },
                                })
                              }
                            />
                            <label className="flex items-center gap-2 text-xs text-ink-2">
                              <input
                                type="checkbox"
                                checked={h.closed}
                                className="h-4 w-4 accent-[#FF4308]"
                                onChange={(e) =>
                                  set("hours", {
                                    ...form.hours,
                                    [day]: { ...h, closed: e.target.checked },
                                  })
                                }
                              />
                              Closed
                            </label>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
            )}

            {step === 2 && form.businessType === "showroom" && (
              <div className="space-y-5">
                <div>
                  <h2 className="text-xl font-bold text-ink">Showroom details</h2>
                  <p className="mt-1.5 text-sm text-ink-2">
                    Tell customers what you sell and service.
                  </p>
                </div>
                <Field label="Showroom type">
                  <div className="flex flex-wrap gap-2">
                    {SHOWROOM_TYPES.map((t) => (
                      <Chip
                        key={t}
                        active={form.showroomType === t}
                        onClick={() => set("showroomType", t)}
                      >
                        {t}
                      </Chip>
                    ))}
                  </div>
                </Field>
                <Field label="Business mode">
                  <div className="flex flex-wrap gap-2">
                    {SHOWROOM_BUSINESS_MODES.map((t) => (
                      <Chip
                        key={t}
                        active={form.businessMode === t}
                        onClick={() => set("businessMode", t)}
                      >
                        {t}
                      </Chip>
                    ))}
                  </div>
                </Field>
                <Field label="Brands you carry">
                  <div className="flex flex-wrap gap-2">
                    {BRANDS.map((b) => (
                      <Chip
                        key={b}
                        active={form.brands.includes(b)}
                        onClick={() =>
                          set(
                            "brands",
                            form.brands.includes(b)
                              ? form.brands.filter((x) => x !== b)
                              : [...form.brands, b],
                          )
                        }
                      >
                        {b}
                      </Chip>
                    ))}
                  </div>
                </Field>
              </div>
            )}

            {step === 2 && form.businessType === "shop" && (
              <div className="space-y-5">
                <div>
                  <h2 className="text-xl font-bold text-ink">Services you offer</h2>
                  <p className="mt-1.5 text-sm text-ink-2">
                    Pick a category, then the vehicle types you handle.
                  </p>
                </div>
                {SERVICE_TREE.map((s) => {
                  const selected = form.serviceSelection[s.category] ?? [];
                  const enabled = form.serviceSelection[s.category] != null;
                  return (
                    <div key={s.category} className="rounded-2xl border border-hairline p-4">
                      <label className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          checked={enabled}
                          className="h-4 w-4 accent-[#FF4308]"
                          onChange={(e) => {
                            const nextSel = { ...form.serviceSelection };
                            if (e.target.checked) nextSel[s.category] = [];
                            else delete nextSel[s.category];
                            set("serviceSelection", nextSel);
                          }}
                        />
                        <span className="font-semibold text-ink">{s.category}</span>
                      </label>
                      {enabled && (
                        <div className="mt-3 space-y-3">
                          {s.options.length > 0 && (
                            <div className="flex flex-wrap gap-2">
                              {s.options.map((o) => (
                                <Chip
                                  key={o}
                                  active={selected.includes(o)}
                                  onClick={() =>
                                    set("serviceSelection", {
                                      ...form.serviceSelection,
                                      [s.category]: selected.includes(o)
                                        ? selected.filter((x) => x !== o)
                                        : [...selected, o],
                                    })
                                  }
                                >
                                  {o}
                                </Chip>
                              ))}
                            </div>
                          )}
                          <input
                            placeholder="Starting price (₹, optional)"
                            inputMode="numeric"
                            className={`${inputClass} max-w-xs`}
                            value={form.servicePrices[s.category] ?? ""}
                            onChange={(e) =>
                              set("servicePrices", {
                                ...form.servicePrices,
                                [s.category]: e.target.value.replace(/\D/g, ""),
                              })
                            }
                          />
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}

            {step === 2 && form.businessType === "individual" && (
              <div className="space-y-5">
                <div>
                  <h2 className="text-xl font-bold text-ink">What do you offer?</h2>
                  <p className="mt-1.5 text-sm text-ink-2">
                    Add your rates so customers see them upfront.
                  </p>
                </div>
                {INDIVIDUAL_SERVICES.map((s) => {
                  const value = form.individual[s.id] ?? {
                    enabled: false,
                    vehicleType: "",
                    chargePerKm: "",
                    towCapacity: "",
                    baseCharge: "",
                  };
                  const update = (patch: Partial<typeof value>) =>
                    set("individual", { ...form.individual, [s.id]: { ...value, ...patch } });
                  return (
                    <div key={s.id} className="rounded-2xl border border-hairline p-4">
                      <label className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          checked={value.enabled}
                          className="h-4 w-4 accent-[#FF4308]"
                          onChange={(e) => update({ enabled: e.target.checked })}
                        />
                        <span className="font-semibold text-ink">{s.label}</span>
                      </label>
                      {value.enabled && (
                        <div className="mt-3 grid sm:grid-cols-2 gap-3">
                          {s.fields.includes("vehicleType") && (
                            <select
                              className={inputClass}
                              value={value.vehicleType}
                              onChange={(e) => update({ vehicleType: e.target.value })}
                            >
                              <option value="">Vehicle type</option>
                              {VEHICLE_TYPES.map((v) => (
                                <option key={v} value={v}>
                                  {v}
                                </option>
                              ))}
                            </select>
                          )}
                          {s.fields.includes("chargePerKm") && (
                            <input
                              placeholder="Charge per km (₹)"
                              inputMode="numeric"
                              className={inputClass}
                              value={value.chargePerKm}
                              onChange={(e) =>
                                update({ chargePerKm: e.target.value.replace(/\D/g, "") })
                              }
                            />
                          )}
                          {s.fields.includes("baseCharge") && (
                            <input
                              placeholder="Visit charge (₹)"
                              inputMode="numeric"
                              className={inputClass}
                              value={value.baseCharge}
                              onChange={(e) =>
                                update({ baseCharge: e.target.value.replace(/\D/g, "") })
                              }
                            />
                          )}
                          {s.fields.includes("towCapacity") && (
                            <input
                              placeholder="Towing capacity (tons)"
                              className={inputClass}
                              value={value.towCapacity}
                              onChange={(e) => update({ towCapacity: e.target.value })}
                            />
                          )}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}

            {error && (
              <p className="mt-5 rounded-xl bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p>
            )}

            <div className="mt-7 flex items-center justify-between gap-3">
              <button
                type="button"
                onClick={step === 0 ? () => navigate({ to: "/select-user" }) : back}
                className="btn-ghost inline-flex items-center gap-2"
              >
                {step === 0 ? (
                  "Cancel"
                ) : (
                  <>
                    <ArrowLeft className="h-4 w-4" /> Back
                  </>
                )}
              </button>
              {step < 2 ? (
                <button
                  type="button"
                  onClick={next}
                  className="btn-brand inline-flex items-center gap-2"
                >
                  Continue <ArrowRight className="h-4 w-4" />
                </button>
              ) : (
                <button
                  type="button"
                  onClick={submit}
                  disabled={busy}
                  className="btn-brand inline-flex items-center gap-2 disabled:opacity-50"
                >
                  {busy && <Loader2 className="h-4 w-4 animate-spin" />} Submit registration
                </button>
              )}
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function Chip({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors ${
        active ? "bg-[#ffebe3] text-[#FF4308]" : "bg-[#f4f4f3] text-ink-2 hover:bg-[#ececea]"
      }`}
    >
      {children}
    </button>
  );
}