import type { ReactNode } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

export interface EmptyStateProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
}

/** Centered empty-state placeholder: icon, title, description, optional CTA. */
export default function EmptyState({
  icon,
  title,
  description,
  action,
}: EmptyStateProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
        py: 6,
        color: "text.secondary",
        gap: 1,
      }}
    >
      {icon && (
        <Box
          sx={{ color: "text.disabled", mb: 0.5, fontSize: 48, lineHeight: 1 }}
        >
          {icon}
        </Box>
      )}
      <Typography
        variant="subtitle1"
        sx={{ fontWeight: 500, color: "text.secondary" }}
      >
        {title}
      </Typography>
      {description && (
        <Typography variant="body2" color="text.secondary">
          {description}
        </Typography>
      )}
      {action && <Box sx={{ mt: 1.5 }}>{action}</Box>}
    </Box>
  );
}