import {
  Bike,
  Boxes,
  Building2,
  CalendarDays,
  Images,
  Store,
  Truck,
  Wrench,
} from "lucide-react";
import type { GalleryImage } from "@/lib/mock-data";
import { cn } from "@/lib/utils";

export type GalleryFilter = "All" | GalleryImage["category"];

type GalleryFiltersProps = {
  activeFilter: GalleryFilter;
  onFilterChange: (filter: GalleryFilter) => void;
};

const filters: Array<{
  label: GalleryFilter;
  icon: typeof Images;
}> = [
  { label: "All", icon: Images },
  { label: "Showroom", icon: Store },
  { label: "Products", icon: Bike },
  { label: "Service", icon: Wrench },
  { label: "Events", icon: CalendarDays },
  { label: "Deliveries", icon: Truck },
  { label: "Branches", icon: Building2 },
];

export function GalleryFilters({
  activeFilter,
  onFilterChange,
}: GalleryFiltersProps) {
  return (
    <div className="container-custom py-6">
      <div className="flex gap-3 overflow-x-auto pb-1">
        {filters.map((filter) => {
          const Icon = filter.icon;
          return (
            <button
              type="button"
              key={filter.label}
              className={cn(
                "inline-flex h-11 min-w-36 items-center justify-center gap-2 rounded-full border px-5 text-sm font-bold shadow-sm transition",
                activeFilter === filter.label
                  ? "border-ev bg-ev text-white"
                  : "border-border bg-white text-navy-deep hover:border-primary/40 hover:bg-primary-soft",
              )}
              onClick={() => onFilterChange(filter.label)}
            >
              <Icon className="h-4 w-4" />
              {filter.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}