import { useFormatters } from "../../hooks/useFormatters";
import { LucideIcon } from "../../lib/iconData";

interface SelectableItemCardProps {
	brand: string | null;
	model: string;
	imageUrl: string | null;
	weightGrams: number | null;
	priceCents: number | null;
	ownerCount: number;
	selected: boolean;
	onClick: () => void;
}

export function SelectableItemCard({
	brand,
	model,
	imageUrl,
	weightGrams,
	priceCents,
	ownerCount,
	selected,
	onClick,
}: SelectableItemCardProps) {
	const { weight: formatWeight, price: formatPrice } = useFormatters();

	return (
		<button
			type="button"
			onClick={onClick}
			className={`relative bg-white rounded-xl border text-left transition-all ${
				selected
					? "border-gray-700 ring-2 ring-gray-700/20"
					: "border-gray-100 hover:border-gray-200 hover:shadow-sm"
			}`}
		>
			{/* Selection indicator */}
			<div className="absolute top-2 right-2 z-10">
				<div
					className={`w-6 h-6 rounded-full flex items-center justify-center ${
						selected
							? "bg-gray-700 border-gray-700"
							: "border-2 border-gray-200 bg-white"
					}`}
				>
					{selected && (
						<LucideIcon name="check" size={14} className="text-white" />
					)}
				</div>
			</div>

			{/* Image */}
			<div className="aspect-square bg-gray-50 rounded-t-xl overflow-hidden">
				{imageUrl ? (
					<img
						src={imageUrl}
						alt={brand ? `${brand} ${model}` : model}
						className="w-full h-full object-cover"
					/>
				) : (
					<div className="w-full h-full flex items-center justify-center">
						<LucideIcon name="package" size={32} className="text-gray-300" />
					</div>
				)}
			</div>

			{/* Info */}
			<div className="p-3">
				{brand && <div className="text-xs text-gray-400 truncate">{brand}</div>}
				<div className="text-sm text-gray-900 font-medium truncate">
					{model}
				</div>
				<div className="flex items-center gap-2 mt-1 text-xs text-gray-400">
					{weightGrams != null && <span>{formatWeight(weightGrams)}</span>}
					{priceCents != null && <span>{formatPrice(priceCents)}</span>}
				</div>
				{ownerCount > 0 && (
					<div className="text-xs text-gray-400 mt-1">
						{ownerCount} {ownerCount === 1 ? "owner" : "owners"}
					</div>
				)}
			</div>
		</button>
	);
}
