"use client";

import { useTranslations } from "next-intl";

const SAR_ICON = "/Riyal.svg";

export default function RelatedItems() {
  /*  const t = useTranslations("related_items");

  const moreItems = Array.from({ length: 6 }).map((_, i) => ({
    id: 3000 + i,
    title: t("horse_title"),
    price: 25000 + i * 700,
    img: [
      "https://upload.wikimedia.org/wikipedia/commons/5/54/Halterstandingshotarabianone.jpg",
      "https://www.mobtada.com/uploads/images/2024/09/17275054480.jpg",
      "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitPwtXIUYnTcjuE5Bzq-pDFmICCR85MHlrkwjNav1ufbpja8tPS4IXp6QE9bxclpzISgXjO0XNtgZFKPHnhexczigj1KeNDbueNboMRrKWbNRFr3WDNZk5X1v9jUAEL7cmSR2Fz27AlM-v/s1600/12705222_1043151082407767_8194466724621808469_n.jpg",
    ][i % 3],
  }));

  const fmt = (n: number) => n.toLocaleString("en-EN"); */

  return (
    <section className="mt-10 ">
      {/*  <div className="flex items-center justify-between mb-3">
        <h3 className="text-lg font-bold text-[#0F5132]">{t("title")}</h3>
        <div className="flex gap-2">
          <button className="px-3 py-2 rounded-lg bg-slate-100">‹</button>
          <button className="px-3 py-2 rounded-lg bg-slate-100">›</button>
        </div>
      </div>

      <div className="overflow-x-auto whitespace-nowrap space-x-4 pr-1 scrollbar-hide">
        {moreItems.map((a) => (
          <div
            key={a.id}
            className="inline-block align-top w-64 bg-white rounded-2xl border shadow overflow-hidden"
          >
            <img
              src={a.img}
              alt={a.title}
              className="h-36 w-full object-cover"
            />
            <div className="p-3">
              <div className="font-bold text-sm">{a.title}</div>
              <div className="text-xs text-slate-500">#{a.id}</div>
              <div className="mt-1 text-[#0F5132] font-extrabold flex items-center gap-1">
                <img src={SAR_ICON} className="w-4 h-4" alt="SAR" />
                {fmt(a.price)}
              </div>
            </div>
          </div>
        ))}
      </div> */}
    </section>
  );
}