import { Link } from '@inertiajs/react';
import { ButtonSize, ButtonVariant } from './button-section';

export type ButtonGroupItem = {
  label: string;
  href: string;
  variant: ButtonVariant;
  openInNewTab: boolean;
};

export type ButtonGroupProps = {
  buttons: ButtonGroupItem[];
  size: ButtonSize;
  align: 'left' | 'center' | 'right';
  gap: string;
  padding: string;
};

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 ButtonGroupSection({
  buttons,
  size,
  align,
  gap,
  padding,
}: ButtonGroupProps) {
  return (
    <div style={{ padding }}>
      <div className={`flex flex-wrap ${alignClass[align]}`} style={{ gap }}>
        {buttons.map((btn, i) => {
          const classes = `inline-flex items-center rounded-md font-medium transition-colors cursor-pointer ${variantClass[btn.variant]} ${sizeClass[size]}`;
          return btn.openInNewTab ? (
            <a
              key={i}
              href={btn.href}
              target="_blank"
              rel="noopener noreferrer"
              className={classes}
            >
              {btn.label}
            </a>
          ) : (
            <Link key={i} href={btn.href} className={classes}>
              {btn.label}
            </Link>
          );
        })}
      </div>
    </div>
  );
}