import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";
import { Link } from "react-router";

interface EditorialMessageProps {
  eyebrow: string;
  title: string;
  body: ReactNode;
  hint?: ReactNode;
  ctaTo?: string;
  ctaLabel?: string;
}

export const EditorialMessage = ({
  eyebrow,
  title,
  body,
  hint,
  ctaTo = "/sign-in",
  ctaLabel = "Back to sign in",
}: EditorialMessageProps) => (
  <div className="mx-auto max-w-2xl py-12 sm:py-20">
    <p className="mb-6 text-[11px] font-medium uppercase tracking-[0.18em] text-zinc-500">{eyebrow}</p>

    <h1 className="mb-8 font-display text-[clamp(2rem,5.5vw,3.25rem)] font-semibold leading-[1.05] tracking-tight text-zinc-100">
      {title}
    </h1>

    <p className="mb-6 max-w-[60ch] text-base leading-[1.7] text-zinc-300">{body}</p>

    {hint ? <p className="mb-10 max-w-[60ch] text-sm leading-[1.7] text-zinc-400">{hint}</p> : null}

    <div className="mb-16">
      <Link
        to={ctaTo}
        className="group inline-flex h-11 items-center gap-2 rounded-xl border border-zinc-700/60 bg-zinc-800/60 px-5 text-sm font-medium text-zinc-200 transition-colors hover:border-zinc-700 hover:bg-zinc-700/60 hover:text-zinc-100"
      >
        <ArrowLeft
          className="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
          aria-hidden="true"
        />
        {ctaLabel}
      </Link>
    </div>
  </div>
);