<script lang="ts">
	import { cn } from '$lib/utils'; // Assuming you have the cn utility from shadcn-svelte

	type Variant = 'default' | 'secondary' | 'outline' | 'destructive';
	type Size = 'default' | 'sm' | 'lg';

	let {
		label,
		variant = 'default',
		size = 'default',
		onClose = undefined,
		class: className = ''
	} = $props<{
		label: string;
		variant?: Variant;
		size?: Size;
		onClose?: () => void;
		class?: string;
	}>();

	// Base styles for the chip
	const baseStyles =
		'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';

	// Variant styles
	const variantStyles: Record<Variant, string> = {
		default:
			'border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground',
		secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
		outline:
			'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
		destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90'
	};

	// Size styles
	const sizeStyles: Record<Size, string> = {
		default: 'h-9 px-3 py-0.5', // Adjusted height for New York style
		sm: 'h-7 px-2 py-0.5 text-xs', // Adjusted height for New York style
		lg: 'h-10 px-4 py-0.5' // Adjusted height for New York style
	};

	// Styles for the close button
	const closeButtonStyles =
		'ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full';
</script>

<div class={cn(baseStyles, variantStyles[variant as Variant], sizeStyles[size as Size], className)}>
	{label}
	{#if onClose}
		<button
			class={cn(closeButtonStyles, 'hover:bg-accent-foreground/20')}
			onclick={onClose}
			aria-label="remove tag"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				class="h-3 w-3"
			>
				<path d="M18 6L6 18" />
				<path d="M6 6L18 18" />
			</svg>
		</button>
	{/if}
</div>
