import React from "react";
import Image from "next/image";
import Link from "next/link";

const Product = ({ title, price, sales, imageUrl, isVip, id }) => {
  return (
    <Link href={`/good/${id}`}>
      <div className="bg-white rounded-lg p-4 shadow-sm">
        <div className="relative aspect-[16/9]">
          <Image
            src={imageUrl}
            alt={title}
            fill
            className="object-cover rounded-lg"
          />
        </div>

        <div className="mt-3">
          <h3 className="text-sm text-gray-900 line-clamp-2">{title}</h3>

          <div className="mt-2 flex items-center justify-between">
            <div className="flex items-center">
              <span className="text-red-500 text-lg font-medium">¥{price}</span>
              {isVip && (
                <span className="ml-1 px-1 text-xs text-yellow-600 border border-yellow-600 rounded">
                  VIP
                </span>
              )}
            </div>
            <span className="text-xs text-gray-500">已售{sales}件</span>
          </div>

          <button className="mt-3 w-full bg-yellow-400 text-sm text-white py-2 px-4 rounded-full hover:bg-yellow-500">
            购买
          </button>
        </div>
      </div>
    </Link>
  );
};

export default Product;