"use client";

import HorseCard from "@/components/hourse-card";

type HorseSample = {
  id: string | number;
  title: string;
  type: string;
  img: string;
  price: number;
  breed?: string;
  city?: string;
  country?: string;
};

export default function AnnualAuctionResultsClient({
  title,
  horses,
}: {
  title: string;
  horses: HorseSample[];
}) {
  const sarIcon =
    "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Saudi_Riyal_Symbol.svg/917px-Saudi_Riyal_Symbol.svg.png";

  return (
    <div dir="rtl" className="bg-[#FBF9F6] min-h-screen">
      <main className="max-w-7xl mx-auto px-4 py-8 space-y-6">
        <header className="flex flex-col gap-1">
          <h1 className="text-2xl md:text-3xl font-extrabold text-[#0F5132]">
            {title}
          </h1>
          <p className="text-sm text-slate-600">
            الجدول الزمني للخيول المشاركة{" "}
          </p>
        </header>

        {horses.length === 0 ? (
          <div className="rounded-2xl border bg-white p-8 text-center text-slate-600">
            لا توجد خيول لعرضها حالياً.
          </div>
        ) : (
          <section className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {horses.map((h) => (
              <HorseCard
                key={String(h.id)}
                sarIcon={sarIcon}
                basePath="auctions"
                horse={h as any}
              />
            ))}
          </section>
        )}
      </main>
    </div>
  );
}