import { Panel } from '@/components/ui/panel';
import type { RecentDevelopmentsWeeklySnapshot } from '@/lib/types';

type WeeklySnapshotCardProps = {
  snapshot: RecentDevelopmentsWeeklySnapshot | null;
};

export function WeeklySnapshotCard(props: WeeklySnapshotCardProps) {
  return (
    <Panel title="Past 7 Days" subtitle="A compact narrative of the most recent filing-driven developments." className="h-full pt-2">
      {props.snapshot ? (
        <div className="space-y-4">
          <div className="border-t border-[color:var(--line-weak)] py-4">
            <p className="text-sm leading-7 text-[color:var(--terminal-bright)]">{props.snapshot.summary}</p>
          </div>
          {props.snapshot.highlights.length > 0 ? (
            <ul className="space-y-3">
              {props.snapshot.highlights.map((highlight) => (
                <li key={highlight} className="border-t border-[color:var(--line-weak)] pt-3 text-sm leading-6 text-[color:var(--terminal-bright)]">
                  {highlight}
                </li>
              ))}
            </ul>
          ) : null}
          <div className="flex flex-wrap gap-2 text-[11px] uppercase tracking-[0.14em] text-[color:var(--terminal-muted)]">
            <span>{props.snapshot.itemCount} tracked items</span>
            <span>{props.snapshot.startDate} to {props.snapshot.endDate}</span>
          </div>
        </div>
      ) : (
        <p className="text-sm text-[color:var(--terminal-muted)]">No weekly snapshot is available yet.</p>
      )}
    </Panel>
  );
}