import { useState } from 'react'

export default function SeedCard({ seed, onInquiry }) {
  const [quantity, setQuantity] = useState(1)

  const getCategoryColor = (category) => {
    const colors = {
      'धान': 'bg-blue-100 text-blue-800',
      'गेहूं': 'bg-amber-100 text-amber-800',
      'मक्का': 'bg-yellow-100 text-yellow-800',
      'दालें': 'bg-green-100 text-green-800',
      'सब्जी': 'bg-red-100 text-red-800',
      'तेल': 'bg-purple-100 text-purple-800',
    }
    return colors[category] || 'bg-gray-100 text-gray-800'
  }

  return (
    <div className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1">
      <div className="relative h-48 bg-gradient-to-br from-kisan-light/20 to-kisan-green/20 flex items-center justify-center">
        <span className="text-6xl">{seed.icon}</span>
        <span className={`absolute top-3 right-3 px-3 py-1 rounded-full text-xs font-semibold ${getCategoryColor(seed.category)}`}>
          {seed.category}
        </span>
      </div>
      
      <div className="p-5">
        <h3 className="text-xl font-bold text-kisan-soil mb-1">{seed.name}</h3>
        <p className="text-gray-500 text-sm mb-3">{seed.hindiName}</p>
        
        <div className="space-y-2 mb-4">
          <div className="flex justify-between text-sm">
            <span className="text-gray-600">उपज:</span>
            <span className="font-semibold text-kisan-green">{seed.yield}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-600">अवधि:</span>
            <span className="font-semibold text-kisan-green">{seed.duration}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-gray-600">मौसम:</span>
            <span className="font-semibold text-kisan-green">{seed.season}</span>
          </div>
        </div>

        <div className="flex items-center justify-between mb-4">
          <div>
            <span className="text-2xl font-bold text-kisan-green">₹{seed.price}</span>
            <span className="text-gray-500 text-sm">/{seed.unit}</span>
          </div>
          <div className="flex items-center gap-2">
            <button 
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
              className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
            >
              -
            </button>
            <span className="w-8 text-center font-semibold">{quantity}</span>
            <button 
              onClick={() => setQuantity(quantity + 1)}
              className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
            >
              +
            </button>
          </div>
        </div>

        <button 
          onClick={() => onInquiry(seed, quantity)}
          className="w-full bg-kisan-green text-white py-3 rounded-xl font-semibold hover:bg-kisan-dark transition flex items-center justify-center gap-2"
        >
          <span>📩</span> पूछताछ करें
        </button>
      </div>
    </div>
  )
}