import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import React from 'react';

import { cn } from '@/admin/lib/utils';

const buttonVariants = cva(
	'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
	{
		variants: {
			variant: {
				default: 'bg-blue-600 text-white hover:bg-blue-700',
				destructive: 'bg-red-600 text-white hover:bg-red-700',
				outline:
          'border border-wp-gray-dark bg-white hover:bg-wp-gray hover:text-wp-text',
				secondary: 'bg-wp-admin-accent text-white hover:bg-wp-admin-highlight',
				ghost: 'hover:bg-wp-gray hover:text-wp-text',
				link: 'text-blue-600 underline-offset-4 hover:underline',
			},
			size: {
				default: 'h-10 px-4 py-2',
				sm: 'h-9 rounded-md px-3',
				lg: 'h-11 rounded-md px-8',
				icon: 'h-10 w-10',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export interface ButtonProps
  extends
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
	( { className, variant, size, asChild = false, ...props }, ref ) => {
		const Comp = asChild ? Slot : 'button';
		return (
			<Comp
				className={ cn( buttonVariants( { variant, size, className } ) ) }
				ref={ ref }
				{ ...props }
			/>
		);
	},
);
Button.displayName = 'Button';

export { Button, buttonVariants };
