components/WorldCard.jsx

import { MapPin, Calendar, Camera, HardDrive } from 'lucide-react';

export default function WorldCard({ world, isSelected, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`w-full text-left p-4 rounded-xl transition-all duration-300 border ${
        isSelected 
          ? 'bg-indigo-600/20 border-indigo-500 shadow-lg shadow-indigo-500/20' 
          : 'bg-slate-800/50 border-slate-700 hover:bg-slate-800 hover:border-slate-600'
      }`}
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className={`font-semibold ${isSelected ? 'text-indigo-300' : 'text-slate-200'}`}>
          {world.name}
        </h3>
        {isSelected && (
          <span className="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
        )}
      </div>
      
      <p className="text-sm text-slate-400 mb-3 line-clamp-2">{world.description}</p>
      
      <div className="space-y-2 text-xs text-slate-500">
        <div className="flex items-center gap-2">
          <MapPin className="w-3 h-3" />
          <span>{world.location}</span>
        </div>
        <div className="flex items-center gap-2">
          <Calendar className="w-3 h-3" />
          <span>{world.captureDate}</span>
        </div>
        <div className="flex items-center gap-2">
          <Camera className="w-3 h-3" />
          <span>{world.cameraModel}</span>
        </div>
        <div className="flex items-center gap-2">
          <HardDrive className="w-3 h-3" />
          <span>{world.fileSize}</span>
        </div>
      </div>
      
      <div className="mt-3 flex flex-wrap gap-1">
        {world.tags?.map((tag) => (
          <span 
            key={tag}
            className="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-400"
          >
            {tag}
          </span>
        ))}
      </div>
    </button>
  );
}