import React, { useState } from 'react';
import { Product } from '../types';
import { Camera, Eye, ImageOff } from 'lucide-react';

interface ProductCardProps {
  product: Product;
  onTryOn: (product: Product) => void;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onTryOn }) => {
  const [imgError, setImgError] = useState(false);

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col group hover:shadow-md transition-shadow">
      <div className="relative aspect-[4/5] overflow-hidden bg-gray-100">
        {!imgError ? (
          <img 
            src={product.imageUrl} 
            alt={product.name} 
            onError={() => setImgError(true)}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
        ) : (
          <div className="w-full h-full flex flex-col items-center justify-center text-gray-400 bg-gray-50">
            <ImageOff className="w-8 h-8 mb-2" />
            <span className="text-xs">Image Unavailable</span>
          </div>
        )}
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
        
        <button 
          onClick={() => onTryOn(product)}
          className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-full font-medium text-sm shadow-lg flex items-center gap-2 transition-all transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100"
        >
          <Camera className="w-4 h-4" />
          Try On
        </button>
      </div>
      
      <div className="p-4 flex flex-col flex-grow">
        <div className="text-xs font-semibold text-brand-600 uppercase tracking-wider mb-1">
          {product.category}
        </div>
        <h3 className="font-medium text-gray-900 mb-1 leading-snug">{product.name}</h3>
        <p className="text-gray-500 text-sm line-clamp-2 mb-4 flex-grow">{product.description}</p>
        <div className="flex items-center justify-between mt-auto pt-3 border-t border-gray-50">
          <span className="font-bold text-lg text-gray-900">${product.price.toFixed(2)}</span>
          <button className="text-sm font-medium text-gray-600 hover:text-brand-600">
            View Details
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;