import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import * as React from 'react';

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

const buttonVariants = cva(
    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 transition-all duration-200',
    {
        variants: {
            variant: {
                default:
                    'bg-primary1/90 text-base-0 shadow-sm hover:bg-primary1 active:bg-primary1/80 tracking-wide',
                destructive:
                    'bg-error/90 text-base-0 shadow-sm hover:bg-error active:bg-error/80 tracking-wide',
                info: 'bg-info/90 text-base-0 shadow-sm hover:bg-info active:bg-info/80 tracking-wide',
                outline:
                    'border border-base-200 bg-base-0 shadow-sm hover:bg-base-200 hover:text-base-500',
                secondary:
                    'bg-secondary/80 text-base-500 shadow-sm hover:bg-secondary active:bg-secondary/80 tracking-wide',
                ghost: 'hover:bg-slate-100 hover:text-slate-900 active:bg-base-0',
                link: 'text-slate-900 underline-offset-4 hover:underline',
            },
            size: {
                default: 'h-10 px-4 py-2.5 text-sm rounded-md',
                sm: 'h-8 rounded-md px-3 text-xs',
                lg: 'h-12 rounded-lg px-8',
                icon: 'h-9 w-9',
                xs: 'h-6 rounded px-2 text-[9px]',
            },
        },
        defaultVariants: {
            variant: 'default',
            size: 'default',
        },
    },
);

const Button = React.forwardRef(
    ({ 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 };