"use client";

import { Plus } from "lucide-react";
import Image from "next/image";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Product } from "../types";

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

const isLowStock = (product: Product): boolean =>
  product.stock <= product.lowStockThreshold;

export default function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const lowStock = isLowStock(product);
  const outOfStock = product.stock === 0;

  return (
    <Card className="group flex flex-col overflow-hidden py-0">
      <div className="relative aspect-square w-full overflow-hidden bg-muted/30">
        <Image
          src={product.image}
          alt={product.name}
          fill
          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw"
          className="object-contain p-4 transition-transform group-hover:scale-105"
        />
        {lowStock && !outOfStock && (
          <Badge
            variant="secondary"
            className="absolute top-2 right-2 bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
          >
            Low Stock
          </Badge>
        )}
      </div>

      <CardContent className="flex-1 px-4 py-3">
        <h3 className="font-medium text-sm line-clamp-1">{product.name}</h3>
        <p className="text-xs text-muted-foreground mt-0.5">
          SKU: {product.sku}
        </p>
        <p className="font-semibold text-sm mt-1">${product.price.toFixed(2)}</p>
        <p
          className={`text-xs mt-1 ${
            outOfStock
              ? "text-destructive"
              : lowStock
                ? "text-amber-500"
                : "text-green-500"
          }`}
        >
          {outOfStock
            ? "Out of stock"
            : `${product.stock} in stock`}
        </p>
      </CardContent>

      <CardFooter className="px-4 pb-3 pt-0">
        <Button
          size="sm"
          className="w-full"
          disabled={outOfStock}
          onClick={() => onAddToCart(product)}
        >
          <Plus className="h-4 w-4 mr-1" />
          Add to cart
        </Button>
      </CardFooter>
    </Card>
  );
}