import { Link } from "react-router-dom";
import { company, whatsappUrl } from "../data";
import "./Primitives.css";

export function Arrow({ diagonal = false }) {
  return (
    <svg
      className="arrow"
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <path
        d={diagonal ? "M6 18 18 6M6 6h12v12" : "M4 12h15m-6-6 6 6-6 6"}
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function Action({ children, to, variant = "dark" }) {
  return (
    <Link className={`action action--${variant}`} to={to}>
      {children}
      <Arrow />
    </Link>
  );
}

export function WhatsAppAction({
  children = "Talk to us on WhatsApp",
  variant = "dark",
  direct = false,
}) {
  const url = whatsappUrl(company.whatsapp);
  const className = `action action--${variant}`;
  if (url)
    return (
      <a className={className} href={url} target="_blank" rel="noreferrer">
        {children}
        <Arrow diagonal />
      </a>
    );
  if (direct)
    return (
      <button
        className={className}
        type="button"
        disabled
        aria-describedby="whatsapp-status"
      >
        {children}
        <Arrow diagonal />
      </button>
    );
  return (
    <Action to="/contact#whatsapp" variant={variant}>
      {children}
    </Action>
  );
}

export function Eyebrow({ children }) {
  return <p className="eyebrow">{children}</p>;
}

export function SectionHeading({ label, title, children, centered = false }) {
  return (
    <header
      className={`section-heading${centered ? " section-heading--centered" : ""}`}
    >
      <div className="section-heading__title">
        <Eyebrow>{label}</Eyebrow>
        <h2 className="section-heading__heading">{title}</h2>
      </div>
      {children && <div className="section-heading__aside">{children}</div>}
    </header>
  );
}

export function Textile({
  kind = "natural",
  className = "",
  caption = true,
  eager = false,
}) {
  return (
    <figure className={`textile textile--${kind} ${className}`}>
      <img
        className="textile__image"
        src={`/images/knit-${kind}.jpg`}
        alt="Illustrative knitted texture — not an RRS product photograph"
        width="1600"
        height="1200"
        loading={eager ? "eager" : "lazy"}
      />
      {caption && (
        <figcaption className="textile__caption">
          Illustrative texture · RRS photography to follow
        </figcaption>
      )}
    </figure>
  );
}

export function PageHero({ label, title, children, texture = "natural" }) {
  return (
    <section className="page-hero">
      <div className="page-hero__copy">
        <Eyebrow>{label}</Eyebrow>
        <h1 className="page-hero__title">{title}</h1>
        <div className="page-hero__description">{children}</div>
        <span className="page-hero__footnote">
          Radhe Radhe Synthetics · Greige knitted fabrics
        </span>
      </div>
      <Textile kind={texture} eager />
    </section>
  );
}