import { Link } from '@inertiajs/react';
import { ArrowUpRight, MapPin, Package } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import type { AppSettings, Product } from './types';

type ProductCardProps = {
    product: Product;
    settings: AppSettings;
};

export default function ProductCard({ product, settings }: ProductCardProps) {
    return (
        <article className="group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-950/10 dark:border-slate-800 dark:bg-slate-900">
            <Link
                href={`/product/${product.slug}`}
                className="relative block aspect-[4/3] overflow-hidden bg-slate-100 dark:bg-slate-800"
            >
                {product.feature_image_url ? (
                    <img
                        src={product.feature_image_url}
                        alt={product.name}
                        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                ) : (
                    <div className="flex h-full items-center justify-center">
                        <Package className="size-10 text-slate-300" />
                    </div>
                )}
                <div className="absolute top-3 right-3">
                    <Badge
                        className={
                            product.stock > 0
                                ? 'border-0 bg-emerald-500 text-white'
                                : 'border-0 bg-rose-500 text-white'
                        }
                    >
                        {product.stock > 0
                            ? `${product.stock} available`
                            : 'Out of stock'}
                    </Badge>
                </div>
            </Link>
            <div className="space-y-4 p-5">
                <div className="flex flex-wrap gap-1.5">
                    {product.category && (
                        <Badge variant="secondary">
                            {product.category.name}
                        </Badge>
                    )}
                    {product.brand && (
                        <Badge variant="outline">{product.brand.name}</Badge>
                    )}
                </div>
                <Link href={`/product/${product.slug}`}>
                    <h3 className="line-clamp-1 text-lg font-semibold transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">
                        {product.name}
                    </h3>
                </Link>
                <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
                    <MapPin className="size-3.5" />
                    {product.store?.name ?? 'Store unavailable'}
                </p>
                <div className="flex items-center justify-between gap-3">
                    <div className="text-xl font-bold">
                        {settings.currency ?? 'USD'} {product.price}
                    </div>
                    <Button
                        size="icon"
                        variant="outline"
                        className="rounded-full"
                        asChild
                    >
                        <Link href={`/product/${product.slug}`}>
                            <ArrowUpRight />
                            <span className="sr-only">View product</span>
                        </Link>
                    </Button>
                </div>
            </div>
        </article>
    );
}