"use client"

import type React from "react"

import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, ShoppingCart } from "lucide-react"
import type { Product } from "@/lib/products"
import { useCart } from "@/lib/cart"

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  const { addItem } = useCart()

  const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault()
    addItem(product)
  }

  return (
    <Card className="group hover:shadow-lg transition-shadow duration-300 border-[var(--border-color)]">
      <Link href={`/store/products/${product.id}`}>
        <div className="relative overflow-hidden">
          {product.isOnSale && (
            <Badge className="absolute top-2 right-2 z-10 bg-[var(--dark-red)] text-white">
              خصم {product.discount}%
            </Badge>
          )}
          <Image
            src={product.image || "/placeholder.svg"}
            alt={product.name}
            width={300}
            height={300}
            className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
          />
        </div>
      </Link>

      <CardContent className="p-4">
        <Link href={`/store/products/${product.id}`}>
          <h3 className="font-semibold text-[var(--dark-color)] mb-2 line-clamp-2 hover:text-[var(--name-item)] transition-colors">
            {product.name}
          </h3>
        </Link>

        <p className="text-sm text-[var(--parg-color)] mb-3 line-clamp-2">{product.description}</p>

        <div className="flex items-center gap-2 mb-3">
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 fill-[var(--main-color)] text-[var(--main-color)]" />
            <span className="text-sm font-medium text-[var(--dark-color)]">{product.rating}</span>
          </div>
          <span className="text-xs text-[var(--p-color)]">({product.reviewCount} تقييم)</span>
        </div>

        <div className="flex items-center gap-2 mb-3">
          <span className="text-lg font-bold text-[var(--dark-color)]">{product.price} جنيه</span>
          {product.originalPrice && (
            <span className="text-sm text-[var(--p-color)] line-through">{product.originalPrice} جنيه</span>
          )}
        </div>

        <div className="flex items-center justify-between text-xs text-[var(--parg-color)]">
          <span>الماركة: {product.brand}</span>
          <span className={product.inStock ? "text-green-600" : "text-[var(--dark-red)]"}>
            {product.inStock ? `متوفر (${product.stockQuantity})` : "غير متوفر"}
          </span>
        </div>
      </CardContent>

      <CardFooter className="p-4 pt-0">
        <Button
          onClick={handleAddToCart}
          disabled={!product.inStock}
          className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium"
        >
          <ShoppingCart className="w-4 h-4 ml-2" />
          إضافة للسلة
        </Button>
      </CardFooter>
    </Card>
  )
}