---
import { getAuthConfig } from '../config/auth';

interface Props {
  variant?: 'primary' | 'inverted';
  size?: 'md' | 'lg';
  showSecondary?: boolean;
  primaryLabel?: string;
  secondaryLabel?: string;
  secondaryHref?: string;
}

const auth = getAuthConfig();

const {
  variant = 'primary',
  size = 'md',
  showSecondary = true,
  primaryLabel = 'Start free trial',
  secondaryLabel = 'Sign in',
  secondaryHref = auth.signInUrl,
} = Astro.props;

const padY = size === 'lg' ? 'py-3' : 'py-2';
const padX = size === 'lg' ? 'px-6' : 'px-5';
const fontSize = size === 'lg' ? 'text-base' : 'text-sm';
---
<div class="flex flex-wrap items-center gap-3">
  <a
    href={auth.signUpUrl}
    class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-semibold transition-colors
      ${variant === 'primary'
        ? 'bg-accent text-bg hover:bg-accent-muted focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg'
        : 'bg-bg text-accent border border-accent hover:bg-accent hover:text-bg'
      }`}
  >
    {primaryLabel}
  </a>
  {showSecondary && (
    <a
      href={secondaryHref}
      class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-medium text-text border border-border-strong hover:border-accent hover:text-accent transition-colors`}
    >
      {secondaryLabel}
    </a>
  )}
</div>