import type { ReactNode } from "react";

type PrototypeFrameProps = {
  title: string;
  sourceFile: string;
  children: ReactNode;
};

export function PrototypeFrame({ title, sourceFile, children }: PrototypeFrameProps) {
  return (
    <div className="mx-auto max-w-content">
      <div className="mb-5 flex items-center gap-3 border-b border-border pb-3 max-md:flex-col max-md:items-start max-md:gap-2 max-md:[&_h1]:text-[1.35rem] max-md:[&_h2]:text-[1.35rem]">
        <span className="rounded-full bg-[rgba(240,160,48,0.08)] px-2 py-0.5 font-mono text-[0.7rem] text-accent">HUD</span>
        <h1 style={{ margin: 0 }}>{title}</h1>
      </div>
      <div className="mb-5 rounded-lg px-5 py-4 text-[0.85rem] leading-[1.5] border border-cyan/20 bg-cyan/8 text-cyan" style={{ marginBottom: "var(--sp-5)" }}>
        Kept from <code>{sourceFile}</code> as the visual reference for future demos.
      </div>
      {children}
    </div>
  );
}
