import type { VariantProps } from 'class-variance-authority';
import { computed, Directive, input } from '@angular/core';
import { cva } from 'class-variance-authority';
import { ClassValue } from 'clsx';
import { cn } from './utils';

export const buttonVariants = cva(
	'inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
	{
		variants: {
			variant: {
				default:
					'bg-white border-2 border-primary text-primary hover:text-white hover:bg-primary/90',
				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
				outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
				ghost: 'hover:bg-accent hover:text-accent-foreground',
				link: 'underline-offset-4 hover:underline text-primary',
			},
			size: {
				default: 'h-10 py-2 px-4',
				sm: 'h-9 px-3 rounded-md',
				lg: 'h-11 px-8 rounded-md',
				icon: 'size-10',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	}
);

export type ButtonVariants = VariantProps<typeof buttonVariants>;

@Directive({
	selector: '[appButton]',
	standalone: true,
	host: {
		'[class]': 'computedClass()',
	},
})
export class ButtonDirective {
	class = input<ClassValue>('');
	variant = input<ButtonVariants['variant']>('default');
	size = input<ButtonVariants['size']>('default');
	computedClass = computed(() =>
		cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.class())
	);
}