import React from 'react';
import { FilingRef, SourceStatus } from '../../types/financial';

interface SecPanelChromeProps {
  title: string;
  subtitle: string;
  cik: string;
  latestFiling?: FilingRef;
  sourceStatus: SourceStatus;
  children: React.ReactNode;
}

export const SecPanelChrome: React.FC<SecPanelChromeProps> = ({
  title,
  subtitle,
  cik,
  latestFiling,
  sourceStatus,
  children,
}) => {
  return (
    <div className="my-4 overflow-hidden rounded-lg border border-term-border bg-term-surface">
      <div className="border-b border-term-border bg-term-highlight px-4 py-3">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h3 className="font-mono text-lg font-bold text-term-text">{title}</h3>
            <p className="mt-0.5 font-mono text-sm text-term-text-muted">{subtitle}</p>
          </div>
          <div className="text-right font-mono text-[11px] uppercase tracking-[0.18em] text-term-text-muted">
            <div>CIK {cik}</div>
            {latestFiling && (
              <div className="mt-1 text-[10px] normal-case tracking-normal text-term-text-tertiary">
                {latestFiling.form} filed {latestFiling.filingDate}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="px-4 py-4">{children}</div>

      <div className="border-t border-term-border bg-term-highlight px-4 py-3">
        <div className="font-mono text-[11px] text-term-text-muted">
          SEC EDGAR • companyfacts
        </div>
        {sourceStatus.degradedReason && (
          <div className="mt-1 font-mono text-[11px] text-warning">{sourceStatus.degradedReason}</div>
        )}
      </div>
    </div>
  );
};
