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

export interface NavigationItem {
  readonly external: boolean;
  readonly href: string;
  readonly label: string;
}

export interface SocialLink {
  readonly label: string;
  readonly url: string;
}

export function SiteHeader({
  businessName,
  navigation,
}: Readonly<{ businessName: string; navigation: readonly NavigationItem[] }>) {
  return (
    <header className="site-header">
      <a className="skip-link" href="#main-content">
        Skip to main content
      </a>
      <div className="site-header__inner">
        <Link className="site-brand" href="/">
          {businessName}
        </Link>
        <nav aria-label="Primary" className="site-nav">
          <ul className="site-nav__list">
            {navigation.map((item) => (
              <li key={`${item.href}-${item.label}`}>
                {item.external ? (
                  <a href={item.href} rel="noreferrer">
                    {item.label}
                  </a>
                ) : (
                  <Link href={item.href}>{item.label}</Link>
                )}
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </header>
  );
}

export function SiteFooter({
  businessName,
  socialLinks,
}: Readonly<{ businessName: string; socialLinks: readonly SocialLink[] }>) {
  return (
    <footer className="site-footer">
      <div className="site-footer__inner">
        <strong>{businessName}</strong>
        <p className="muted">
          Independent storefront shell. Business policies are added per client.
        </p>
        {socialLinks.length === 0 ? null : (
          <nav aria-label="Social links">
            <ul className="social-links">
              {socialLinks.map((item) => (
                <li key={item.url}>
                  <a href={item.url} rel="noreferrer">
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        )}
      </div>
    </footer>
  );
}

export function ProductGrid({ children }: Readonly<{ children: ReactNode }>) {
  return <div className="product-grid">{children}</div>;
}

export function ProductCard({
  description,
  formattedPrice,
  href,
  mediaLabel,
  name,
}: Readonly<{
  description: string;
  formattedPrice: string;
  href: string;
  mediaLabel: string;
  name: string;
}>) {
  return (
    <article className="product-card">
      <div aria-label={mediaLabel} className="product-card__media" role="img">
        Media placeholder
      </div>
      <div className="product-card__body">
        <h3>{name}</h3>
        <p>{description}</p>
        <PriceDisplay value={formattedPrice} />
        <Link href={href}>View product</Link>
      </div>
    </article>
  );
}

export function PriceDisplay({ value }: Readonly<{ value: string }>) {
  return <data className="price">{value}</data>;
}

export function QuantitySelector({
  disabled = false,
  id,
  label = "Quantity",
  onChange,
  value,
}: Readonly<{
  disabled?: boolean;
  id: string;
  label?: string;
  onChange?: (value: number) => void;
  value?: number;
}>) {
  return (
    <label className="quantity-selector" htmlFor={id}>
      <span className="field__label">{label}</span>
      <input
        {...(value === undefined ? { defaultValue: "1" } : { value })}
        disabled={disabled}
        id={id}
        inputMode="numeric"
        max="99"
        min="1"
        onChange={
          onChange === undefined
            ? undefined
            : (event) => onChange(event.currentTarget.valueAsNumber)
        }
        type="number"
      />
    </label>
  );
}

export function CartLine({
  actions,
  details,
  formattedPrice,
  name,
}: Readonly<{ actions?: ReactNode; details?: ReactNode; formattedPrice: string; name: string }>) {
  return (
    <article className="cart-line">
      <div>
        <h3>{name}</h3>
        {details}
        <PriceDisplay value={formattedPrice} />
      </div>
      {actions}
    </article>
  );
}