import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import type { ButtonHTMLAttributes } from 'react';
import { forwardRef } from 'react';

const variants = cva(
  'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
  {
    defaultVariants: {
      intent: 'default',
    },
    variants: {
      intent: {
        danger: 'bg-danger hover:bg-danger-700',
        default: 'bg-primary hover:bg-primary-700',
        'outline-danger':
          'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
        'outline-default':
          'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
        'outline-secondary':
          'opacity-70 bg-transparent text-secondary border border-secondary hover:bg-secondary hover:text-white',
        secondary: 'bg-secondary hover:bg-secondary-700',
      },
    },
  }
);

export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, intent, ...props }, ref) => (
    <button type="button" className={cn(variants({ className, intent }))} ref={ref} {...props} />
  )
);