---
// CP-BASE-005 button
interface Props {
  href?: string;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  type?: 'button' | 'submit' | 'reset';
  ariaLabel?: string;
  external?: boolean;
}
const {
  href,
  variant = 'primary',
  size = 'md',
  type = 'button',
  ariaLabel,
  external = false,
} = Astro.props;

const classes = `btn btn--${variant} btn--${size}`;
const isExternal = href ? /^https?:\/\//.test(href) || external : false;
---
{href ? (
  <a
    href={href}
    class={classes}
    aria-label={ariaLabel}
    rel={isExternal ? 'noopener noreferrer' : undefined}
    target={isExternal ? '_blank' : undefined}
  >
    <slot />
  </a>
) : (
  <button type={type} class={classes} aria-label={ariaLabel}>
    <slot />
  </button>
)}

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius, 8px);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    min-height: 44px;
    padding: 0 1.25rem;
  }
  .btn--sm { min-height: 36px; padding: 0 0.9rem; font-size: 0.9rem; }
  .btn--md { font-size: 1rem; }
  .btn--lg { min-height: 52px; padding: 0 1.6rem; font-size: 1.05rem; }

  .btn--primary {
    background: var(--color-primary, #c25a2c);
    color: #fff;
  }
  .btn--primary:hover {
    background: var(--color-primary-dark, #9c4520);
  }
  .btn--secondary {
    background: transparent;
    color: var(--color-primary, #c25a2c);
    border-color: var(--color-primary, #c25a2c);
  }
  .btn--ghost {
    background: transparent;
    color: var(--color-text, #1a1a1a);
  }
  .btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
</style>