import type { ReactNode } from "react";

export function BrowserFrame({
  url,
  children,
}: {
  url: string;
  children: ReactNode;
}) {
  const displayUrl = url.replace(/^https?:\/\//, "");

  return (
    <div className="overflow-hidden rounded border border-border-light bg-surface-light dark:border-border-dark dark:bg-surface-dark">
      <div className="flex items-center gap-3 border-b border-border-light bg-slate-100 px-3 py-2 dark:border-border-dark dark:bg-slate-800">
        <span className="flex gap-1.5">
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300 dark:bg-slate-600" />
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300 dark:bg-slate-600" />
          <span className="h-2.5 w-2.5 rounded-full bg-slate-300 dark:bg-slate-600" />
        </span>
        <span className="truncate rounded-sm bg-white px-2 py-0.5 font-mono text-[11px] text-slate-500 dark:bg-slate-900 dark:text-slate-400">
          {displayUrl}
        </span>
      </div>
      <div className="relative aspect-[3/2] w-full overflow-hidden">{children}</div>
    </div>
  );
}