"use client";

import * as React from "react";
import { cn } from "../../utils/cn";

interface CodeWindowProps {
  title: string;
  children: React.ReactNode;
  className?: string;
  actions?: React.ReactNode;
  fixedHeight?: boolean;
  minHeight?: string;
}

/**
 * CodeWindow: A shared, stable browser-frame chassis for code, terminal, and diagrams.
 * - Enforces dimension stability to prevent layout shifts.
 * - Standardizes the "Systems, not Brochures" aesthetic.
 */
export const CodeWindow: React.FC<CodeWindowProps> = ({
  title,
  children,
  className = "",
  actions,
  fixedHeight = false,
  minHeight = "380px",
}) => {
  return (
    <div
      className={cn(
        "relative rounded-xl border border-slate-100 bg-slate-50/50 backdrop-blur-sm overflow-hidden w-full flex flex-col",
        fixedHeight && "h-[400px]",
        className,
      )}
      style={!fixedHeight && minHeight ? { minHeight } : {}}
    >
      {/* Window chrome */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-white/50 shrink-0">
        <div className="flex items-center gap-1.5">
          <div className="w-2 h-2 rounded-full bg-slate-200" />
          <div className="w-2 h-2 rounded-full bg-slate-200" />
          <div className="w-2 h-2 rounded-full bg-slate-200" />
          <span className="ml-3 text-[9px] font-mono text-slate-300 uppercase tracking-widest select-none">
            {title}
          </span>
        </div>
        {actions && <div className="flex items-center gap-2">{actions}</div>}
      </div>

      {/* Content area */}
      <div className="flex-1 overflow-x-auto overflow-y-auto p-4 md:p-6 font-mono text-xs md:text-sm leading-relaxed relative">
        {children}
      </div>

      {/* Bottom gradient fade for aesthetics/depth */}
      <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-slate-50/80 to-transparent pointer-events-none" />
    </div>
  );
};
