"use client";

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

export type ProgressReportEmptyStateLabels = {
  title: string;
  description: string;
};

type ProgressReportEmptyStateProps = {
  labels: ProgressReportEmptyStateLabels;
};

const EMPTY_STATE_ICON = "/images/progress-report/empty-state-schedule.svg";

export function ProgressReportEmptyState({
  labels,
}: ProgressReportEmptyStateProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const titleColor = isDark ? "#f9fafb" : "#292929";
  const descriptionColor = isDark ? "#98a2b3" : "#292929";

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
        minHeight: "100%",
      }}
    >
      <Box
        sx={{
          width: 108,
          height: 108,
          flexShrink: 0,
          position: "relative",
        }}
      >
        <Box
          component="img"
          src={EMPTY_STATE_ICON}
          alt=""
          sx={{
            display: "block",
            width: "100%",
            height: "100%",
            objectFit: "contain",
          }}
        />
      </Box>

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
          p: "10px",
          textAlign: "center",
        }}
      >
        <Box>
          <Typography
            sx={{
              mb: "14px",
              fontSize: 14,
              fontWeight: 600,
              lineHeight: "20px",
              color: titleColor,
            }}
          >
            {labels.title}
          </Typography>
          <Typography
            sx={{
              fontSize: 14,
              fontWeight: 400,
              lineHeight: "20px",
              color: descriptionColor,
            }}
          >
            {labels.description}
          </Typography>
        </Box>
      </Box>
    </Box>
  );
}