import Link from "next/link";
import { ReactNode } from "react";

export function Button({
  href,
  children,
  variant = "primary",
  className,
  type = "button"
}: {
  href?: string;
  children: ReactNode;
  variant?: "primary" | "secondary" | "ghost";
  className?: string;
  type?: "button" | "submit" | "reset";
}) {
  const styleClass =
    variant === "primary"
      ? "bg-gradient-to-br from-primary to-primary-container text-white rounded-full hover:brightness-105 shadow-sm shadow-primary/30"
      : variant === "secondary"
        ? "bg-surface-container-low text-on-surface border border-outline-variant/70 rounded-full hover:bg-surface-container-high"
        : "text-on-surface-variant hover:text-on-surface hover:bg-surface-container-low";

  if (href) {
    return (
      <Link
        href={href}
        className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
          className ?? ""
        } ${className?.includes("w-full") ? "" : "min-w-24"}`}
      >
        {children}
      </Link>
    );
  }

  return (
    <button
      type={type}
      className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
        className ?? ""
      } ${className?.includes("w-full") ? "" : "min-w-24"}`}
    >
      {children}
    </button>
  );
}

export function SectionCard({
  title,
  description,
  children
}: {
  title: string;
  description?: string;
  children: ReactNode;
}) {
  return (
    <section className="rounded-[1.25rem] border border-line bg-surface-container-lowest p-5 shadow-card">
      <div className="mb-4">
        <h3 className="text-base font-bold font-headline text-on-surface">{title}</h3>
        {description ? <p className="mt-1 text-sm text-on-surface-variant">{description}</p> : null}
      </div>
      {children}
    </section>
  );
}

export function Badge({
  children,
  tone = "default"
}: {
  children: ReactNode;
  tone?: "default" | "success" | "warning" | "danger";
}) {
  const tones = {
    default: "bg-surface-container-high text-on-surface-variant",
    success: "bg-success/10 text-success",
    warning: "bg-warning/10 text-warning",
    danger: "bg-error/10 text-danger"
  };

  return (
    <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${tones[tone]}`}>
      {children}
    </span>
  );
}

export function PageHeader({
  title,
  description,
  actions
}: {
  title: string;
  description: string;
  actions?: ReactNode;
}) {
  return (
    <div className="flex flex-col gap-4 border-b border-line pb-6 md:flex-row md:items-end md:justify-between">
      <div>
        <p className="text-xs font-bold uppercase tracking-[0.16em] text-on-surface-variant">ZappCare</p>
        <h1 className="mt-2 text-3xl font-extrabold font-headline text-on-surface">{title}</h1>
        <p className="mt-2 max-w-2xl text-sm text-on-surface-variant">{description}</p>
      </div>
      {actions ? <div className="flex flex-wrap gap-3">{actions}</div> : null}
    </div>
  );
}