import { cn } from '@/lib/utils';

type PanelProps = {
  title?: string;
  subtitle?: string;
  actions?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  variant?: 'flat' | 'surface';
};

export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
  return (
    <section
      className={cn(
        variant === 'surface'
          ? 'min-w-0 rounded-[1.25rem] border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 sm:p-5'
          : 'min-w-0 border-t border-[color:var(--line-weak)] pt-4',
        className
      )}
    >
      {(title || subtitle || actions) ? (
        <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            {title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
            {subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
          </div>
          {actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
        </header>
      ) : null}
      {children}
    </section>
  );
}
