'use client';

import * as React from 'react';
import { ChevronRight } from 'lucide-react';
import { type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { buttonVariants } from './button-variants';

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants>;

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        disabled={disabled}
        className={cn(
          buttonVariants({
            variant,
          }),
          className,
        )}
        {...props}
      >
        {/* PRIMARY BACKGROUND EFFECT */}
        {variant === 'primary' && !disabled && (
          <span
            className={cn(
              'absolute inset-0',
              'translate-y-full',
              'bg-linear-to-t',
              'from-white/25 via-white/10 to-transparent',
              'transition-transform duration-500 ease-out',
              'group-hover:translate-y-0',
            )}
          />
        )}

        {/* CONTENT */}
        <span
          className={cn(
            'relative z-10 inline-flex items-center gap-2',
            'transition-all duration-300',
            variant === 'secondary' && 'group-hover:-translate-x-1',
          )}
        >
          <span>{children}</span>

          {/* SECONDARY CHEVRON */}
          {variant === 'secondary' && (
            <ChevronRight
              className={cn(
                'h-4 w-4',
                'scale-75 opacity-0',
                'transition-all duration-300 ease-out',
                'group-hover:opacity-100',
                'group-hover:scale-100',
              )}
            />
          )}
        </span>
      </button>
    );
  },
);

Button.displayName = 'Button';