import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils"; // clsx + tailwind-merge wrapper

// ── Base + Variants ──────────────────────────────────────────────
const buttonVariants = cva(
  // Base: shared structure (always applied)
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        primary:     "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary:   "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        outline:     "border border-input bg-transparent hover:bg-accent",
        ghost:       "hover:bg-accent hover:text-accent-foreground",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
    },
    compoundVariants: [
      { variant: "destructive", size: "lg", class: "font-semibold" },
    ],
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  }
);

// ── Component ────────────────────────────────────────────────────
interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
  );
}

{{/* layouts/partials/components/button.html */}}
{{/* 
  Params:
    .label    (string, required) — Button text
    .variant  (string, optional) — "primary"|"secondary"|"outline"|"ghost"|"destructive", default "primary"
    .size     (string, optional) — "sm"|"md"|"lg", default "md"
    .disabled (bool, optional)   — default false
    .href     (string, optional) — If set, renders as <a> instead of <button>
    .class    (string, optional) — Additional CSS classes
*/}}

{{- $variant := .variant | default "primary" -}}
{{- $size := .size | default "md" -}}
{{- $disabled := .disabled | default false -}}

{{- $baseClass := "btn" -}}
{{- $variantClass := printf "btn--%s" $variant -}}
{{- $sizeClass := printf "btn--%s" $size -}}
{{- $disabledClass := cond $disabled "btn--disabled" "" -}}

{{- $classes := delimit (slice $baseClass $variantClass $sizeClass $disabledClass .class) " " -}}

{{ if .href }}
  <a href="{{ .href }}" class="{{ $classes }}">{{ .label }}</a>
{{ else }}
  <button class="{{ $classes }}"{{ if $disabled }} disabled{{ end }}>{{ .label }}</button>
{{ end }}

---
// src/components/Button.astro

interface Props {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  href?: string;
  class?: string;
}

const {
  variant = 'primary',
  size = 'md',
  disabled = false,
  href,
  class: extraClass,
} = Astro.props;

const classes = [
  'btn',
  `btn--${variant}`,
  `btn--${size}`,
  disabled && 'btn--disabled',
  extraClass,
].filter(Boolean).join(' ');
---

{href ? (
  <a href={href} class:list={[classes]}><slot /></a>
) : (
  <button class:list={[classes]} disabled={disabled}><slot /></button>
)}

<!--
  Button Component
  Classes: .btn, .btn--primary|secondary|outline|ghost|destructive, .btn--sm|md|lg, .btn--disabled
  Data attrs: none
-->
<button class="btn btn--primary btn--md">Submit</button>

Voice: [adjective], [adjective], [adjective]
Example: "Confident, approachable, precise"

[Subject description]. Rendered in [rendering style] with [palette description].
[Detail level] detail, [stroke style] strokes, [texture] finish.
The mood is [mood keywords]. No photographic elements.

A barber trimming a customer's beard in a classic barbershop chair.
Rendered in flat vector style with a warm palette of cream, rust,
and charcoal. Moderate detail, thick outline strokes, subtle grain
texture. The mood is confident, nostalgic, and welcoming.
No photographic elements.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}