import { Link } from '@inertiajs/react';

export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
export type ButtonSize = 'sm' | 'md' | 'lg';

export type ButtonProps = {
  label: string;
  href: string;
  variant: ButtonVariant;
  size: ButtonSize;
  align: 'left' | 'center' | 'right';
  padding: string;
  openInNewTab: boolean;
};

const variantClass: Record<ButtonVariant, string> = {
  primary: 'bg-primary text-primary-foreground hover:opacity-90',
  secondary: 'bg-secondary text-secondary-foreground hover:opacity-90',
  outline:
    'border border-primary text-primary hover:bg-primary hover:text-primary-foreground',
  ghost: 'text-foreground hover:bg-muted',
};

const sizeClass: Record<ButtonSize, string> = {
  sm: 'px-4 py-2 text-sm',
  md: 'px-6 py-3 text-base',
  lg: 'px-8 py-4 text-lg',
};

const alignClass = {
  left: 'justify-start',
  center: 'justify-center',
  right: 'justify-end',
};

export default function ButtonSection({
  label,
  href,
  variant,
  size,
  align,
  padding,
  openInNewTab,
}: ButtonProps) {
  const classes = `inline-flex items-center rounded-md font-medium transition-colors cursor-pointer ${variantClass[variant]} ${sizeClass[size]}`;

  return (
    <div style={{ padding }} className={`flex ${alignClass[align]}`}>
      {openInNewTab ? (
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className={classes}
        >
          {label}
        </a>
      ) : (
        <Link href={href} className={classes}>
          {label}
        </Link>
      )}
    </div>
  );
}