import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Vehicle } from '@/data/vehicles';
import { ChevronRight } from 'lucide-react';

interface VehicleCardProps {
  vehicle: Vehicle;
}

const VehicleCard = ({ vehicle }: VehicleCardProps) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="bg-[#161617] rounded-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-blue-900/10"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative">
        <div className={`h-52 bg-gradient-to-br from-[#202022] to-[#121214] overflow-hidden flex items-center justify-center transition-transform duration-500 ${isHovered ? 'scale-105' : 'scale-100'}`}>
          <img
            src={vehicle.image}
            alt={`${vehicle.name} ${vehicle.model}`}
            className="h-40 object-contain transform transition-all duration-500"
          />
        </div>
        <div className="absolute top-3 right-3 bg-blue-600/80 text-xs font-bold text-white px-2 py-1 rounded">
          {vehicle.category}
        </div>
      </div>

      <div className="p-5">
        <div className="mb-4">
          <h3 className="text-xl font-bold text-white">
            {vehicle.name} {vehicle.model}
          </h3>
          <p className="text-gray-400 text-sm mt-1 line-clamp-2">
            {vehicle.description}
          </p>
        </div>

        <div className="flex justify-between items-center mb-4">
          <div>
            <span className="text-2xl font-bold text-white">${vehicle.price}</span>
            <span className="text-gray-400 text-sm">/day</span>
          </div>
          <div className="text-right">
            <span className="text-gray-400 text-sm">Subscription</span>
            <p className="text-gray-300 font-medium">${vehicle.pricePerMonth}/mo</p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 mb-5">
          <div className="bg-[#1a1a1c] p-2 rounded text-center">
            <p className="text-xs text-gray-400">Range</p>
            <p className="text-sm font-medium text-white">{vehicle.specs.range}</p>
          </div>
          <div className="bg-[#1a1a1c] p-2 rounded text-center">
            <p className="text-xs text-gray-400">0-60 mph</p>
            <p className="text-sm font-medium text-white">{vehicle.specs.acceleration}</p>
          </div>
        </div>

        <Link
          to={`/vehicles/${vehicle.id}`}
          className="bg-blue-600 hover:bg-blue-700 w-full py-3 rounded-md font-medium transition-colors text-white flex items-center justify-center gap-1"
        >
          View Details
          <ChevronRight size={16} />
        </Link>
      </div>
    </div>
  );
};

export default VehicleCard;