import React from 'react';
import { StyleOption } from '../types';
import { Check } from 'lucide-react';

interface StyleCardProps {
  styleOption: StyleOption;
  isSelected: boolean;
  onSelect: (style: StyleOption) => void;
}

const StyleCard: React.FC<StyleCardProps> = ({ styleOption, isSelected, onSelect }) => {
  return (
    <div 
      onClick={() => onSelect(styleOption)}
      className={`glass-card relative group cursor-pointer rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 h-[340px] flex flex-col ${
        isSelected ? 'ring-2 ring-indigo-500 shadow-[0_0_30px_rgba(99,102,241,0.3)]' : 'hover:bg-white/5'
      }`}
    >
      <div className="h-48 overflow-hidden relative">
        <div className="absolute inset-0 bg-gradient-to-t from-[#0f0f11] via-transparent to-transparent z-10" />
        <img 
          src={styleOption.previewImage} 
          alt={styleOption.name}
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
        />
        {isSelected && (
            <div className="absolute top-4 right-4 z-20 bg-indigo-500/80 backdrop-blur-md rounded-full p-1.5 shadow-lg shadow-indigo-500/50">
                <Check className="w-4 h-4 text-white" />
            </div>
        )}
      </div>

      <div className="p-6 flex flex-col flex-1 relative z-20">
        <h3 className={`text-xl font-bold mb-2 ${isSelected ? 'text-indigo-400 text-glow' : 'text-white group-hover:text-indigo-300'} transition-colors`}>
          {styleOption.name}
        </h3>
        <p className="text-sm text-zinc-400 leading-relaxed line-clamp-3 font-light">{styleOption.description}</p>
        
        <div className="mt-auto pt-4 flex">
            <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 border border-zinc-700/50 px-2 py-1 rounded group-hover:border-indigo-500/30 group-hover:text-indigo-400 transition-colors">
                Visual DNA
            </span>
        </div>
      </div>
    </div>
  );
};

export default StyleCard;