"use client";

import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";

type ProgressReportDescriptionSectionProps = {
  description: string;
};

export function ProgressReportDescriptionSection({
  description,
}: ProgressReportDescriptionSectionProps) {
  const theme = useTheme();

  return (
    <section>
      <Typography
        sx={{
          mb: 1,
          fontSize: 13,
          color: theme.palette.text.secondary,
        }}
      >
        Description :
      </Typography>

      <Paper
        elevation={0}
        sx={{
          p: 2,
          borderRadius: "8px",
          bgcolor:
            theme.palette.mode === "dark"
              ? alpha(theme.palette.background.paper, 0.9)
              : "#fafafa",
        }}
      >
        <Typography
          sx={{
            fontSize: 13,
            fontWeight: 500,
            lineHeight: 1.6,
            color: theme.palette.text.primary,
          }}
        >
          {description}
        </Typography>
      </Paper>
    </section>
  );
}