shoc-frontend-new/src/components/ui/empty-state.tsx

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

import { cn } from "@/lib/utils";

type EmptyStateProps = {
  icon?: ReactElement;
  title: string;
  description?: string;
  action?: ReactElement;
  className?: string;
};

export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
  return (
    <Box
      className={cn(
        "flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card px-6 py-12 text-center",
        className,
      )}
    >
      {Boolean(icon) && <Box className="text-muted-foreground">{icon}</Box>}
      <Typography variant="subtitle1" className="text-foreground">
        {title}
      </Typography>
      {Boolean(description) && (
        <Typography
          variant="body2"
          className="max-w-sm"
          sx={{
            color: "text.secondary",
          }}
        >
          {description}
        </Typography>
      )}
      {Boolean(action) && <Box className="mt-2">{action}</Box>}
    </Box>
  );
}