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-[#2a2a2a] bg-[#111111]">
      <div className="border-b border-[#2a2a2a] bg-[#1a1a1a] 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-[#e0e0e0]">{title}</h3>
            <p className="mt-0.5 font-mono text-sm text-[#888888]">{subtitle}</p>
          </div>
          <div className="text-right font-mono text-[11px] uppercase tracking-[0.18em] text-[#888888]">
            <div>CIK {cik}</div>
            {latestFiling && (
              <div className="mt-1 text-[10px] normal-case tracking-normal text-[#a0a0a0]">
                {latestFiling.form} filed {latestFiling.filingDate}
              </div>
            )}
          </div>
        </div>
      </div>

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

      <div className="border-t border-[#2a2a2a] bg-[#151515] px-4 py-3">
        <div className="font-mono text-[11px] text-[#8a8a8a]">
          SEC EDGAR • companyfacts
          {sourceStatus.latestXbrlParsed ? ' • latest filing parsed with crabrl' : ''}
        </div>
        {sourceStatus.degradedReason && (
          <div className="mt-1 font-mono text-[11px] text-[#d1a254]">{sourceStatus.degradedReason}</div>
        )}
      </div>
    </div>
  );
};
