'use client';

/* EngagementSummaryCard — phase 07 (ENG-03).
 * Purpose: Single summary card with big number + label, stacked single-column.
 *          Used 4× on the page: Active users, Total Graph hours, Total Autotask hours, Hours / active user (D-08).
 *          Card has no shadow, only border (matches FinanceRow density per D-10).
 * Props: value (display string), label (display string). */

import { Card, CardContent } from '@/components/ui/card';

export interface EngagementSummaryCardProps {
  value: string;  // pre-formatted: "42", "128.5h", "—"
  label: string;  // "Active users", "Total Graph hours", etc.
}

export function EngagementSummaryCard({ value, label }: EngagementSummaryCardProps) {
  return (
    <Card className="py-0 shadow-none">
      <CardContent className="px-4 py-4">
        <p className="text-2xl font-semibold text-foreground leading-none">{value}</p>
        <p className="text-xs text-muted-foreground mt-2">{label}</p>
      </CardContent>
    </Card>
  );
}