import type { ReactNode } from "react";
import { Box, CircularProgress, Paper } from "@mui/material";
import { QueryErrorPanel } from "@/components/ui/query-error-panel";
import { Text } from "@/components/ui/text";

interface DashboardCardProps {
  title: string;
  /** Optional scope caption shown beside the title (e.g. SH-349's all-time note). */
  caption?: string;
  isLoading?: boolean;
  error?: unknown;
  isEmpty: boolean;
  emptyMessage: string;
  children: ReactNode;
}

export function DashboardCard({
  title,
  caption,
  isLoading = false,
  error,
  isEmpty,
  emptyMessage,
  children,
}: DashboardCardProps) {
  return (
    <Paper variant="outlined" className="flex flex-col overflow-hidden">
      <Box className="flex items-baseline justify-between gap-2 border-b border-border px-4 py-3">
        <Text variant="heading">{title}</Text>
        {!!caption && (
          <Text variant="description" tone="muted">
            {caption}
          </Text>
        )}
      </Box>
      {isLoading && (
        <Box className="flex items-center justify-center p-8">
          <CircularProgress size={24} />
        </Box>
      )}
      {!isLoading && Boolean(error) && <QueryErrorPanel compact className="m-4" />}
      {!isLoading && !error && isEmpty && (
        <Box className="p-6">
          <Text variant="description" tone="muted">
            {emptyMessage}
          </Text>
        </Box>
      )}
      {!isLoading && !error && !isEmpty && <Box className="p-4">{children}</Box>}
    </Paper>
  );
}