"use client";

import { useState } from "react";
import { Waves, Utensils, ShoppingBag, Activity } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Category {
  id: string;
  name: string;
  icon: React.ComponentType<{ className?: string }>;
}

const categories: Category[] = [
  { id: "all", name: "Tout", icon: Activity },
  { id: "plages", name: "Plages", icon: Waves },
  { id: "restaurants", name: "Restaurants / Roulottes", icon: Utensils },
  { id: "epiceries", name: "Epiceries", icon: ShoppingBag },
  { id: "activites", name: "Activités", icon: Activity },
];

interface CategoryListProps {
  selectedCategory: string;
  onCategoryChange: (categoryId: string) => void;
}

export default function CategoryList({
  selectedCategory,
  onCategoryChange,
}: CategoryListProps) {
  return (
    <div className="flex gap-3 overflow-x-auto pb-2 px-4 scrollbar-hide">
      {categories.map((category) => {
        const Icon = category.icon;
        const isSelected = selectedCategory === category.id;
        return (
          <button
            key={category.id}
            onClick={() => onCategoryChange(category.id)}
            className={cn(
              "flex items-center gap-2 px-4 py-2 rounded-xl whitespace-nowrap transition-colors",
              isSelected
                ? "bg-primary text-white"
                : "bg-white text-gray-700 border border-gray-200 hover:bg-secondary"
            )}
          >
            <Icon className="h-5 w-5" />
            <span className="font-medium">{category.name}</span>
          </button>
        );
      })}
    </div>
  );
}