'use client';

import { useState } from 'react';
import BikeCard from '@/components/BikeCard';
import { availableBikes } from '@/data/mockData';
import { Search, Filter } from 'lucide-react';

export default function BikesPage() {
  const [filter, setFilter] = useState<string>('all');
  const [sort, setSort] = useState<string>('location');

  return (
    <div className="p-4 lg:p-6">
      <div className="mb-6">
        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Browse EVs</h1>
        <p className="text-sm text-slate-500">Find the perfect bike for your needs</p>
      </div>

      <div className="flex flex-wrap gap-3 mb-6">
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium"
        >
          <option value="all">All Locations</option>
          <option value="gulshan">Gulshan</option>
          <option value="banani">Banani</option>
          <option value="uttara">Uttara</option>
          <option value="dhanmondi">Dhanmondi</option>
          <option value="mirpur">Mirpur</option>
        </select>

        <select
          value={sort}
          onChange={(e) => setSort(e.target.value)}
          className="px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium"
        >
          <option value="location">Sort by Location</option>
          <option value="battery">Sort by Battery</option>
          <option value="model">Sort by Model</option>
        </select>

        <button className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2">
          <Search className="w-4 h-4" /> Search
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {availableBikes.map(bike => (
          <BikeCard key={bike.id} bike={bike} />
        ))}
      </div>

      {availableBikes.length === 0 && (
        <div className="text-center py-12">
          <p className="text-slate-400 text-lg">No bikes available</p>
          <p className="text-slate-400 text-sm">Check back later for availability</p>
        </div>
      )}
    </div>
  );
}