CedarCopilot/cedar-mail

import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface SetupPreviewFrameProps {
  /** Shown in the frame's title bar — says what the user is looking at. */
  label: string;
  children: ReactNode;
  className?: string;
}

/**
 * The window the right-hand preview lives in. A title bar and a hard edge, so a
 * preview of the app rendered inside the app still reads as a picture of the app
 * rather than as another pane of it.
 */
export function SetupPreviewFrame({ label, children, className }: SetupPreviewFrameProps) {
  return (
    <div
      className={cn(
        'bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border shadow-sm',
        className,
      )}
    >
      <div className="bg-sidebar flex shrink-0 items-center gap-2 border-b px-3 py-2">
        <span className="flex gap-1.5">
          <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f57]" />
          <span className="h-2.5 w-2.5 rounded-full bg-[#febc2e]" />
          <span className="h-2.5 w-2.5 rounded-full bg-[#28c840]" />
        </span>
        <span className="text-muted-foreground ml-2 text-xs font-medium">{label}</span>
      </div>
      <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
    </div>
  );
}