"use client";

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

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

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

  return (
    <section className="section">
      <div className="container-page">
        <div className="section-head">
          <h2>محصولات ویژه</h2>
          <p>Special 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 items-stretch gap-4 overflow-x-auto px-1 pb-2"
            style={{ scrollbarWidth: "none" }}
          >
            {specialProducts.map((item) => (
              <article
                key={item.code}
                className="card-shadow flex min-w-[220px] flex-1 basis-[220px] flex-col overflow-hidden bg-white sm:min-w-[230px]"
              >
                <div className="relative aspect-[4/3] shrink-0 bg-[#fafafa]">
                  <Image
                    src={item.image}
                    alt={item.title}
                    fill
                    className="object-contain p-3"
                    sizes="230px"
                  />
                </div>
                <div className="flex flex-1 flex-col p-4">
                  <h3 className="mb-1 line-clamp-2 h-12 text-sm font-bold leading-6 text-[#232323]">
                    {item.title}
                  </h3>
                  <p className="mb-4 text-xs text-[#999]">{item.code}</p>
                  <a href="tel:02146144267" className="btn-cart mt-auto">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <path
                        d="M8.5 3.5h3l1 5-2 1.5a12 12 0 0 0 5.5 5.5l1.5-2 5 1v3c0 1.1-.9 2-2 2A16 16 0 0 1 4.5 5.5c0-1.1.9-2 2-2Z"
                        stroke="currentColor"
                        strokeWidth="1.6"
                        strokeLinejoin="round"
                      />
                    </svg>
                    تماس بگیرید
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
