"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

type PlenaryChartCardProps = {
  title?: string;
  action?: ReactNode;
  children: ReactNode;
  backgroundColor?: string;
};

export function PlenaryChartCard({
  title,
  action,
  children,
  backgroundColor,
}: PlenaryChartCardProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
        borderRadius: "14px",
        border: `1px solid ${
          theme.palette.mode === "dark"
            ? "#25324a"
            : "#eaecf0"
        }`,
        bgcolor:
          backgroundColor ??
          theme.palette.background.paper,
        p: 2,
        boxShadow:
          theme.palette.mode === "dark"
            ? "none"
            : "0 1px 2px rgba(16, 24, 40, 0.04)",
      }}
    >
      {title || action ? (
        <Box
          sx={{
            mb: 2,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 1.5,
          }}
        >
          <Typography
            sx={{
              color:
                theme.palette.mode === "dark"
                  ? "#f8fafc"
                  : "#4b5563",
              fontSize: 13,
              fontWeight: 600,
            }}
          >
            {title}
          </Typography>

          {action}
        </Box>
      ) : null}

      <Box
        sx={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          minHeight: 0,
        }}
      >
        {children}
      </Box>
    </Box>
  );
}