import React from 'react'

interface AsciiPanelProps {
  title: string
  subtitle?: string
  children: React.ReactNode
  variant: 'emerald' | 'amber' | 'slate'
}

export function AsciiPanel({
  title,
  subtitle,
  children,
  variant = 'slate',
}: AsciiPanelProps) {
  const colorMap = {
    emerald:
      'border-emerald-500/40 text-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.05)]',
    amber:
      'border-amber-500/40 text-amber-400 shadow-[0_0_10px_rgba(245,158,11,0.05)]',
    slate: 'border-slate-800 text-slate-400',
  }
  return (
    <div
      className={`border bg-black font-mono flex flex-col h-full rounded-sm ${colorMap[variant]}`}
    >
      {/* Dynamic Header Band */}
      <div className="flex justify-between items-center bg-slate-900/40 px-3 py-1.5 border-b border-inherit text-xs uppercase tracking-wider font-bold select-none">
        <span>[ {title} ]</span>
        {subtitle && <span className="opacity-60">{subtitle}</span>}
      </div>
      {/* Panel Inner Body */}
      <div className="p-4 flex-1 text-slate-300 text-sm overflow-y-auto">
        {children}
      </div>
    </div>
  )
}
