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

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

const buttonVariants = cva(
    'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors duration-200 ease-out',
    {
        variants: {
            variant: {
                default: 'bg-violet rounded-4xl hover:bg-light-violet',
                outline: '',
                ghost: '',
                link: 'hover:text-light-violet',
                icon: 'bg-violet hover:bg-light-violet rounded-[10px] cursor-pointer',
                menu: 'w-[350px] h-[42px] hover:bg-light-violet active:bg-violet active:border-violet rounded-4xl border-2 border-light-violet justify-start',
                menuActive:
                    'w-[350px] h-[42px] bg-violet border-violet rounded-4xl justify-start',
                danger: 'bg-violet-darker rounded-4xl hover:bg-light-violet',
            },
            size: {
                sm: 'py-1.75 px-3.75',
                default: 'py-2.5 px-7.5',
                lg: 'py-2.5 px-7.5 w-full',
                icon: 'size-12.5 p-3.75',
                text: '',
            },
        },
        defaultVariants: {
            variant: 'default',
            size: 'default',
        },
    },
);

function Button({
    className,
    variant = 'default',
    size = 'default',
    asChild = false,
    ...props
}: React.ComponentProps<'button'> &
    VariantProps<typeof buttonVariants> & {
        asChild?: boolean;
    }) {
    const Comp = asChild ? Slot : 'button';

    return (
        <Comp
            data-slot="button"
            data-variant={variant}
            data-size={size}
            className={cn(buttonVariants({ variant, size, className }))}
            {...props}
        />
    );
}

export { Button, buttonVariants };