import type { DirectorCard } from "@/lib/storage/director";
import { GlassCard } from "@/components/silisuite/glass-card";

export function MetricCard({ card }: { card: DirectorCard }) {
  return (
    <GlassCard className="p-4">
      <p className="ss-label text-[var(--ss-accent)]">{card.title}</p>
      <div className="mt-3 grid grid-cols-2 gap-3">
        {card.metrics.map((m) => (
          <div key={m.label}>
            <p className="text-muted-foreground text-xs">{m.label}</p>
            <p className="ss-heading text-lg">{m.value}</p>
          </div>
        ))}
      </div>
    </GlassCard>
  );
}