"use client";

import React from "react";
import { useTranslations } from "next-intl";
import PlatformsSection from "@/components/hero-card";
import { useGeneralSettings } from "@/lib/clientQueries";

export default function PlatformsPage() {
  const t = useTranslations("PLATFORMS");

  const { data: settings, isLoading } = useGeneralSettings();

  if (isLoading) {
    return (
      <section className="py-10">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-6">
            {Array.from({ length: 2 }).map((_, i) => (
              <div
                key={i}
                className="h-72 rounded-xl bg-slate-200 animate-pulse"
              />
            ))}
          </div>
        </div>
      </section>
    );
  }

  const isFallback = Boolean((settings as any)?._isFallback);

  const platformsData = [
    {
      id: "horse",
      imgSrc:
        settings?.platform_2_image || (isFallback ? "/images/unnamed.jpg" : ""),
      sponsorImageSrc:
        settings?.platform_2_sponsor_image ||
        (isFallback ? "/images/aboobaied.jpg" : ""),
      alt: t("horse_title"),
      test: t("test"),

      title: settings?.platform_2_name || (isFallback ? t("horse_title") : ""),
      buttons: [
        {
          label: t("horse_offers"),
          href: "horses",
          bgClass: "bg-[color:var(--primary)] text-white",
        },
        {
          label: t("horse_auctions"),
          href: "auctions",
          bgClass: "bg-[#F4EFE9] text-[color:var(--g1)]",
        },
      ],
      badge: {
        text:
          settings?.platform_2_sponsor_name ||
          (isFallback ? t("horse_badge") : ""),
        bgClass: "bg-white/70",
        test: t("test"),

        borderClass: "",
        textClass: "text-[color:var(--g1)]",
      },
    },
    {
      id: "camel",
      imgSrc:
        settings?.platform_1_image || (isFallback ? "/images/banner.avif" : ""),
      sponsorImageSrc:
        settings?.platform_1_sponsor_image ||
        (isFallback ? "/images/qawafel.png" : ""),
      alt: t("camel_title"),
      test: t("test"),
      title: settings?.platform_1_name || (isFallback ? t("camel_title") : ""),
      buttons: [
        {
          label: t("camel_offers"),
          href: "camels",
          bgClass: "bg-[color:var(--primary)] text-white",
        },
        {
          label: t("camel_auctions"),
          href: "camels/auctions",
          bgClass: "bg-[#F4EFE9] text-[color:var(--g1)]",
        },
      ],
      badge: {
        text:
          settings?.platform_1_sponsor_name ||
          (isFallback ? t("camel_badge") : ""),
        test: t("test"),
        bgClass: "bg-white/70",
        borderClass: "",
        textClass: "text-[color:var(--g1)]",
      },
    },
  ];

  return <PlatformsSection platforms={platformsData} />;
}