"use client";

const categoriesFilter = [
  { value: "all",     label: "Tous les véhicules" },
  { value: "economy", label: "Économique" },
  { value: "suv",     label: "SUV" },
  { value: "luxury",  label: "Luxe" },
];

export default function CarsFilterTabs() {
  return (
    <section
      style={{
        background: "#1c2133",
        borderBottom: "1px solid #2a3050",
        position: "sticky",
        top: 0,
        zIndex: 100,
        boxShadow: "0 2px 20px rgba(0,0,0,0.4)",
      }}
    >
      <div
        style={{
          maxWidth: 1100,
          margin: "0 auto",
          padding: "0 1.5rem",
          display: "flex",
          gap: "0.25rem",
          overflowX: "auto",
          scrollbarWidth: "none",
        }}
      >
        {categoriesFilter.map((cat) => (
          <a
            key={cat.value}
            href={cat.value === "all" ? "/cars" : `/cars?category=${cat.value}`}
            style={{
              padding: "1rem 1.4rem",
              whiteSpace: "nowrap",
              textDecoration: "none",
              color: "rgba(255,255,255,0.65)",
              fontFamily: "var(--font-montserrat)",
              fontWeight: 600,
              fontSize: "0.85rem",
              borderBottom: "3px solid transparent",
              transition: "all 0.2s",
              display: "block",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
            }}
            onMouseEnter={(e) => {
              (e.currentTarget as HTMLElement).style.color = "#e85c1a";
              (e.currentTarget as HTMLElement).style.borderBottomColor = "#e85c1a";
            }}
            onMouseLeave={(e) => {
              (e.currentTarget as HTMLElement).style.color = "rgba(255,255,255,0.65)";
              (e.currentTarget as HTMLElement).style.borderBottomColor = "transparent";
            }}
          >
            {cat.label}
          </a>
        ))}
      </div>
    </section>
  );
}