// SPDX-License-Identifier: MIT
// Copyright (c) 2025-2026 SenWeaverCoding
// Licensed under the MIT License.

import type { ReactNode } from 'react'

type Props = {
  title?: string
  children: ReactNode
  className?: string
}

export function TerminalChrome({ title, children, className = '' }: Props) {
  return (
    <div className={`overflow-hidden rounded-2xl border border-[var(--color-outline-variant)]/20 bg-[var(--color-surface-dim)] ${className}`}>
      {}
      <div className="flex items-center gap-2 border-b border-[var(--color-terminal-border)] bg-[var(--color-terminal-header)] px-3 py-2">
        <div className="flex gap-1.5">
          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-danger)]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-warning)]" />
          <div className="w-2.5 h-2.5 rounded-full bg-[var(--color-terminal-accent)]" />
        </div>
        {title && (
          <span className="ml-2 truncate font-[var(--font-mono)] text-[10px] text-[var(--color-terminal-muted)]">
            {title}
          </span>
        )}
      </div>
      {}
      <div className="bg-[var(--color-terminal-bg)] text-[var(--color-terminal-fg)]">
        {children}
      </div>
    </div>
  )
}
