import * as React from "react";

type TerminalCardProps = {
  readonly title: string;
  readonly children: React.ReactNode;
  readonly className?: string;
};

export const TerminalCard: React.FC<TerminalCardProps> = ({
  title,
  children,
  className = "",
}) => (
  <figure
    className={`overflow-hidden rounded-lg border border-border bg-surface ${className}`}
  >
    <figcaption className="flex items-center gap-2 border-b border-border px-4 py-2.5 font-mono text-xs text-faint">
      <span aria-hidden="true" className="text-accent">
        ●
      </span>
      {title}
    </figcaption>
    <div className="overflow-x-auto p-4 font-mono text-sm leading-relaxed text-fg">
      {children}
    </div>
  </figure>
);