'use client';

import { useState } from 'react';
import Image from "next/image";
import { cn } from "@/lib/utils";

interface FleetItem {
  name: string;
  description: string;
  capacity: string;
  reach: string;
  image: string;
  status: string;
  category: string;
}

interface FleetListProps {
  items: FleetItem[];
  categories: string[];
}

export function FleetList({ items, categories }: FleetListProps) {
  const [activeCategory, setActiveCategory] = useState("Hepsi");

  const filteredItems = activeCategory === "Hepsi" 
    ? items 
    : items.filter(item => item.category === activeCategory);

  return (
    <>
      {/* Filter System */}
      <section className="bg-surface-container border-y border-outline-variant/10">
        <div className="max-w-7xl mx-auto px-8 py-6">
          <div className="flex flex-wrap items-center gap-4">
            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
            {categories.map((category) => (
              <button 
                key={category}
                onClick={() => setActiveCategory(category)}
                className={cn(
                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
                  activeCategory === category 
                    ? "bg-primary text-on-primary" 
                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
                )}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Fleet Grid */}
      <section className="max-w-7xl mx-auto px-8 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
          {filteredItems.map((item, index) => (
            <div 
              key={index}
              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
            >
              <div className="aspect-[4/3] overflow-hidden relative">
                <Image 
                  src={item.image}
                  alt={item.name}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className={cn(
                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
                )}>
                  {item.status}
                </div>
              </div>
              <div className="p-8 flex-1 flex flex-col">
                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
                  {item.name}
                </h3>
                <p className="text-on-surface-variant text-sm mb-6 font-light">
                  {item.description}
                </p>
                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
                  </div>
                  <div>
                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
                  </div>
                </div>
                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
                  İncele
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}