import Link from "next/link";
import { ShareBanner } from "./share-banner";
import { ShareBrandStrip } from "./share-brand-strip";

interface Props {
  expiresAt?: Date | null;
  capabilities: { read: boolean; write: boolean };
  token: string;
  sharedByName?: string | null;
  children: React.ReactNode;
}

export function ShareFrame({ expiresAt, capabilities, token, sharedByName, children }: Props) {
  return (
    <div className="min-h-screen flex flex-col">
      <ShareBanner expiresAt={expiresAt ?? null} capabilities={capabilities} token={token} />
      <ShareBrandStrip sharedByName={sharedByName} />
      <main className="flex-1 w-full mx-auto" style={{ maxWidth: 720, padding: "36px 24px 80px" }}>
        {children}
        <ShareFoot />
      </main>
    </div>
  );
}

function ShareFoot() {
  return (
    <div className="muted text-center text-[12px] mt-16 leading-[1.6]">
      <p className="mb-1">
        This page is a snapshot. The original lives in the host&apos;s famapp household and may
        change &mdash; we&apos;ll reflect updates here until the link expires.
      </p>
      <p className="m-0">
        Hosted on <code style={{ fontFamily: "var(--mono)", fontSize: 11 }}>famapp</code> ·
        self-hosted ·{" "}
        <Link
          href="/"
          className="underline"
          style={{ color: "var(--ink-soft)", textUnderlineOffset: 3 }}
        >
          about famapp
        </Link>
      </p>
    </div>
  );
}