import { ShoppingCart, ExternalLink } from "lucide-react";

export default function ProductCard() {
  return (
    <div className="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white hover:shadow-xl transition-shadow duration-300">
      <div className="relative">
        <img
          src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
          alt="Modern Armchair"
          className="w-full h-64 object-cover"
        />
        <span className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-medium">
          -20% OFF
        </span>
      </div>

      <div className="p-6">
        <div className="text-sm text-gray-500 mb-2 font-medium">LUXURY HOMES</div>
        <h3 className="text-xl font-semibold text-gray-800 mb-3">
          Modern Velvet Armchair
        </h3>
        <p className="text-gray-600 mb-4 line-clamp-2">
          Elegant velvet armchair with solid wood legs, perfect for your living room. Features premium upholstery and ergonomic design for maximum comfort.
        </p>

        <div className="flex items-center mb-4">
          <span className="text-2xl font-bold text-gray-800">$299</span>
          <span className="ml-2 text-lg text-gray-500 line-through">$379</span>
          <span className="ml-auto text-green-600 text-sm font-medium">
            Free Shipping
          </span>
        </div>

        <div className="flex gap-3">
          <button className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center gap-2">
            <ShoppingCart size={20} />
            Add to Cart
          </button>
          <button className="bg-gray-100 p-2 rounded-lg hover:bg-gray-200 transition-colors duration-200">
            <ExternalLink size={20} className="text-gray-600" />
          </button>
        </div>
      </div>
    </div>
  );
}