import { motion } from 'framer-motion';
import { useState } from 'react';

export default function BuildingCard({ building, onPurchase, resources }) {
  const [isPurchasing, setIsPurchasing] = useState(false);

  const canAfford = building.cost.every(cost => {
    const resource = resources.find(r => r.name === cost.name);
    return resource && resource.amount >= cost.amount;
  });

  const handlePurchase = () => {
    if (canAfford && !isPurchasing) {
      setIsPurchasing(true);
      setTimeout(() => {
        onPurchase(building);
        setIsPurchasing(false);
      }, 500);
    }
  };

  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      className="bg-space-dark/50 border border-space-blue/30 rounded-lg p-4 flex flex-col"
    >
      <div className="flex justify-between items-start mb-3">
        <h3 className="text-lg font-semibold text-space-gold">{building.name}</h3>
        <div className="text-right">
          <div className="text-xs text-space-blue/70">Level {building.level}</div>
          <div className="text-xs text-space-gold">
            +{building.production}/s
          </div>
        </div>
      </div>

      <div className="mb-3">
        <p className="text-sm text-space-blue/80 mb-2">{building.description}</p>
        <div className="flex flex-wrap gap-2 mb-3">
          {building.cost.map((cost, index) => {
            const resource = resources.find(r => r.name === cost.name);
            const hasEnough = resource && resource.amount >= cost.amount;
            return (
              <div
                key={index}
                className={`flex items-center space-x-1 px-2 py-1 rounded text-xs ${
                  hasEnough ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'
                }`}
              >
                <cost.icon size={12} />
                <span>{cost.amount}</span>
              </div>
            );
          })}
        </div>
      </div>

      <motion.button
        whileTap={{ scale: 0.98 }}
        onClick={handlePurchase}
        disabled={!canAfford || isPurchasing}
        className={`w-full py-2 rounded-lg font-medium transition-all ${
          canAfford
            ? 'bg-space-gold text-space-dark hover:bg-yellow-400'
            : 'bg-gray-600 text-gray-400 cursor-not-allowed'
        } ${isPurchasing ? 'animate-pulse' : ''}`}
      >
        {isPurchasing ? 'Purchasing...' : `Buy (${building.cost[0].amount} ${building.cost[0].name})`}
      </motion.button>
    </motion.div>
  );
}