import React from 'react';
import { equipment } from './equipmentData';

interface ProductGridProps {
  answers: string[];
}

export function ProductGrid({ answers }: ProductGridProps) {
  const getRecommendedEquipment = () => {
    const [budget, connection, people, space] = answers;
    
    let recommended = equipment.filter(item => {
      // Budget filter
      if (budget === "Under $200" && parseFloat(item.price.replace("$", "")) > 200) return false;
      if (budget === "$200-$500" && parseFloat(item.price.replace("$", "")) > 500) return false;
      
      // Connection type filter
      if (connection === "USB (Simpler Setup)" && item.category.includes("xlr")) return false;
      if (connection === "XLR (Professional Quality)" && item.category.includes("usb")) return false;
      
      // People filter
      if (people === "Solo" && item.category.includes("multi")) return false;
      if (people === "3+ People" && !item.category.includes("multi")) return false;
      
      return true;
    });

    // Ensure we always return at least one item per category
    const categories = ['microphone', 'interface', 'headphones', 'accessories'];
    categories.forEach(category => {
      if (!recommended.some(item => item.category.includes(category))) {
        const fallback = equipment.find(item => item.category.includes(category));
        if (fallback) recommended.push(fallback);
      }
    });

    return recommended;
  };

  const recommendedEquipment = getRecommendedEquipment();
  
  return (
    <div className="space-y-8">
      <div className="bg-white rounded-xl shadow-lg p-8">
        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Recommended Equipment</h2>
        <div className="grid gap-8">
          {['Microphones', 'Audio Interfaces', 'Headphones', 'Accessories'].map(category => {
            const items = recommendedEquipment.filter(item => 
              item.category.toLowerCase().includes(category.toLowerCase().slice(0, -1))
            );
            
            return items.length > 0 && (
              <div key={category}>
                <h3 className="text-xl font-semibold text-purple-600 mb-4">{category}</h3>
                <div className="grid gap-6 md:grid-cols-2">
                  {items.map((item, index) => (
                    <div key={index} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
                      <img 
                        src={item.image} 
                        alt={item.name}
                        className="w-full h-48 object-cover rounded-lg mb-4"
                      />
                      <h3 className="text-xl font-semibold text-gray-900 mb-2">{item.name}</h3>
                      <p className="text-purple-600 font-semibold mb-2">{item.price}</p>
                      <p className="text-gray-600 mb-4">{item.description}</p>
                      <a
                        href={item.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 transition-colors w-full"
                      >
                        View Product
                      </a>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}