'use client';

import { ButtonProps } from '../types';
import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';
import { Link } from './link';

export const Button = (props: ButtonProps) => {
  const {
    appearance = 'filled',
    size = 'md',
    href,
    target,
    children,
    className,
    ...rest
  } = props;

  const variants = {
    filled:
      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
    outlined:
      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
    ghost:
      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
    link: 'px-0 h-auto underline underline-offset-2'
  };

  const sizes = {
    sm: 'h-8',
    md: 'h-10',
    lg: 'h-12',
    xl: 'h-14'
  };

  const buttonClasses = twMerge(
    clsx(
      'px-4 text-xs transition-all duration-200',
      'inline-flex gap-2 justify-center items-center',
      variants[appearance],
      sizes[size],
      className
    ),
    className
  );

  return props.href ? (
    <Link
      prefetch={false}
      target={target}
      href={href}
      className={buttonClasses}
    >
      {children}
    </Link>
  ) : (
    <button {...rest} className={buttonClasses}>
      {children}
    </button>
  );
};