import Image from 'next/image';
import { Bike } from '@/data/mockData';

interface BikeCardProps {
  bike: Bike;
  onRent?: (bikeId: string) => void;
  compact?: boolean;
}

export default function BikeCard({ bike, onRent, compact }: BikeCardProps) {
  const statusColors = {
    available: 'bg-green-100 text-green-700',
    rented: 'bg-blue-100 text-blue-700',
    maintenance: 'bg-amber-100 text-amber-700',
    retired: 'bg-slate-100 text-slate-500',
  };

  if (compact) {
    return (
      <div className="flex items-center gap-3 p-3 bg-white rounded-lg border border-slate-100 hover:border-accent/30 transition-colors">
        <div className="w-12 h-12 rounded-lg bg-slate-100 overflow-hidden relative">
          <Image src={bike.image} alt={bike.model} fill className="object-cover" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-semibold text-sm text-slate-800 truncate">{bike.model}</p>
          <p className="text-xs text-slate-500">{bike.plateNumber}</p>
        </div>
        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${statusColors[bike.status]}`}>
          {bike.status}
        </span>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
      <div className="h-36 bg-slate-100 relative">
        <Image src={bike.image} alt={bike.model} fill className="object-cover" />
        <div className="absolute top-2 right-2">
          <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${statusColors[bike.status]}`}>
            {bike.status}
          </span>
        </div>
        <div className="absolute bottom-2 left-2 bg-white/90 backdrop-blur-sm px-2 py-1 rounded-md">
          <p className="text-xs font-semibold text-slate-700">🔋 {bike.batteryLevel}%</p>
        </div>
      </div>
      <div className="p-4">
        <h3 className="font-bold text-slate-800">{bike.model}</h3>
        <p className="text-sm text-slate-500">{bike.brand} • {bike.plateNumber}</p>
        <div className="flex items-center gap-2 mt-2 text-xs text-slate-400">
          <span>📍 {bike.location}</span>
        </div>
        {onRent && bike.status === 'available' && (
          <button
            onClick={() => onRent(bike.id)}
            className="w-full mt-4 py-2.5 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors"
          >
            Rent This Bike
          </button>
        )}
      </div>
    </div>
  );
}