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

export function Logo({ compact = false }: { compact?: boolean }) {
  return (
    <span className={compact ? "logo logo-compact" : "logo"}>
      <svg className="logo-mark" viewBox="0 0 32 32" aria-hidden="true">
        <rect width="32" height="32" rx="8" fill="currentColor" />
        <path d="M13 10.5v11l9-5.5-9-5.5z" fill="#fff" />
      </svg>
      <span>
        Clip<span className="logo-accent">well</span>
      </span>
    </span>
  );
}

export function StructuredData({ data }: { data: unknown }) {
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />;
}

export function Breadcrumb({ items }: { items: Array<{ name: string; href?: string }> }) {
  return (
    <nav className="breadcrumb" aria-label="Breadcrumb">
      <ol>
        {items.map((item, index) => (
          <li key={item.name}>
            {item.href && index < items.length - 1 ? <Link href={item.href}>{item.name}</Link> : <span aria-current="page">{item.name}</span>}
            {index < items.length - 1 ? <span aria-hidden="true"> / </span> : null}
          </li>
        ))}
      </ol>
    </nav>
  );
}

export function InnerPage({
  title,
  lede,
  children,
}: {
  title: string;
  lede?: string;
  children: ReactNode;
}) {
  return (
    <article className="inner">
      <div className="container narrow">
        <Breadcrumb items={[{ name: "Home", href: "/" }, { name: title }]} />
        <h1>{title}</h1>
        {lede ? <p className="lede">{lede}</p> : null}
        <div className="prose">{children}</div>
      </div>
    </article>
  );
}