'use client';

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';
import { allProducts } from '../../schemas/inventory';

interface cardProps {
  product: allProducts;
  onClick?: () => void;
}

export function ProductCard({ product, onClick }: cardProps) {

  return (
    <Card className="cursor-pointer flex flex-col" onClick={onClick}>
      <CardTitle className="text-base font-bold truncate p-3 text-primary">
        {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
      </CardTitle>
      <CardContent className="p-0 flex-grow">
        <img
          className="object-cover w-full h-full aspect-square border"
          src={`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
          alt=""
        />
      </CardContent>
      <CardFooter className="flex-col items-start p-4">
        {product.status === 'AGOTADO' ? (
          <p className="font-semibold text-lg text-red-900">AGOTADO</p>
        ) : ('')}
        <p className="font-semibold text-lg">{product.price} Bs.</p>
      </CardFooter>
    </Card>
  )
}