import type { AnchorHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";

export function HaloButton({ variant = "primary", className = "", ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: "primary" | "secondary" | "quiet" }) {
  return <a className={`halo-button halo-button--${variant} ${className}`.trim()} {...props} />;
}

export function HaloTextLink({ children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
  return <a className="halo-text-link" {...props}><span>{children}</span><span className="halo-text-link__signal" aria-hidden="true">→</span></a>;
}

export function HaloEyebrow({ children }: { children: ReactNode }) {
  return <p className="halo-eyebrow">{children}</p>;
}

export function HaloStatusBadge({ children, state = "pending" }: { children: ReactNode; state?: "verified" | "warning" | "danger" | "pending" }) {
  return <span className={`halo-badge halo-badge--${state}`}>{children}</span>;
}

export function HaloEvidenceCard({ label, value, interpretation, source }: { label: string; value: string; interpretation: string; source: string }) {
  return <article className="halo-evidence-card"><span className="halo-evidence-card__label">{label}</span><strong className="halo-evidence-card__value">{value}</strong><p className="halo-evidence-card__interpretation">{interpretation}</p><span className="halo-evidence-card__source">Source · {source}</span></article>;
}

export function HaloField({ id, label, help, error, required, ...props }: InputHTMLAttributes<HTMLInputElement> & { id: string; label: string; help?: string; error?: string }) {
  const describedBy = [help ? `${id}-help` : null, error ? `${id}-error` : null].filter(Boolean).join(" ") || undefined;
  return <label className="halo-field" htmlFor={id}><span className="halo-field__label"><span>{label}</span><span className="halo-field__required">{required ? "Required" : "Optional"}</span></span><input id={id} aria-describedby={describedBy} aria-invalid={error ? true : undefined} required={required} {...props} />{help ? <span className="halo-field__help" id={`${id}-help`}>{help}</span> : null}{error ? <span className="halo-field__error" id={`${id}-error`}>{error}</span> : null}</label>;
}

export function HaloNavLink({ number, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement> & { number: string }) {
  return <a className="halo-nav-link" {...props}><span className="halo-nav-link__number">{number}</span><span>{children}</span></a>;
}

export function HaloMotionSignature() {
  return <p className="halo-motion-signature" aria-label="Move to the dot. Then capture."><span className="halo-motion-signature__line" aria-hidden="true" /><span className="halo-motion-signature__copy" aria-hidden="true"><span>Move to the dot.</span><span>Then capture.</span></span></p>;
}