"use client";

import Image from "next/image";
import { useRef } from "react";
import { productCategories } from "@/data/home";

export function Products() {
  const scroller = useRef<HTMLDivElement>(null);

  const scrollBy = (dir: number) => {
    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
  };

  return (
    <section id="products" className="section section-gray">
      <div className="container-page">
        <div className="section-head">
          <h2>محصولات رسام تجارت هواران</h2>
          <p>HAVARAN Products</p>
        </div>

        <div className="relative min-w-0">
          <button
            type="button"
            aria-label="قبلی"
            onClick={() => scrollBy(-1)}
            className="absolute top-1/2 right-0 z-10 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white text-[#666] shadow md:flex"
          >
            ›
          </button>
          <button
            type="button"
            aria-label="بعدی"
            onClick={() => scrollBy(1)}
            className="absolute top-1/2 left-0 z-10 hidden h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white text-[#666] shadow md:flex"
          >
            ‹
          </button>

          <div
            ref={scroller}
            className="flex max-w-full gap-4 overflow-x-auto px-1 pb-2 scrollbar-none"
            style={{ scrollbarWidth: "none" }}
          >
            {productCategories.map((item) => (
              <article
                key={item.title}
                className="card-shadow min-w-[220px] flex-1 basis-[220px] bg-white p-5 text-center sm:min-w-[230px]"
              >
                <a
                  href={item.href}
                  title={item.linkTitle}
                  className="mb-4 flex h-[100px] items-center justify-center"
                >
                  <Image
                    src={item.image}
                    alt={item.title}
                    width={100}
                    height={100}
                    unoptimized
                    className="h-[100px] w-[100px] object-contain"
                    style={{ width: 100, height: 100 }}
                  />
                </a>
                <h3 className="mb-5 min-h-12 text-[15px] font-bold leading-7 text-[#232323]">
                  <a href={item.href}>{item.title}</a>
                </h3>
                <a href={item.href} className="btn-more">
                  بیشتر بدانید
                </a>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
