import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { SxProps, Theme } from "@mui/material/styles";

type HeadingProps = {
  title: string;
  description?: string;
  action?: ReactNode;
  sx?: SxProps<Theme>;
  titleSx?: SxProps<Theme>;
  descriptionSx?: SxProps<Theme>;
};

export function Heading({
  title,
  description,
  action,
  sx,
  titleSx,
  descriptionSx,
}: HeadingProps) {
  return (
    <Box
      sx={[
        {
          display: "flex",
          alignItems: { xs: "flex-start", sm: "center" },
          justifyContent: "space-between",
          flexDirection: { xs: "column", sm: "row" },
          gap: 2,
          mb: 2.5,
        },
        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
      ]}
    >
      <Box sx={{ minWidth: 0 }}>
        <Typography
          component="h1"
          sx={[
            {
              color: "text.primary",
              fontSize: { xs: 28, md: 32 },
              fontWeight: 700,
              lineHeight: 1.15,
            },
            ...(Array.isArray(titleSx)
              ? titleSx
              : titleSx
                ? [titleSx]
                : []),
          ]}
        >
          {title}
        </Typography>

        {description ? (
          <Typography
            sx={[
              {
                mt: 0.75,
                color: "text.secondary",
                fontSize: 14,
                fontWeight: 500,
              },
              ...(Array.isArray(descriptionSx)
                ? descriptionSx
                : descriptionSx
                  ? [descriptionSx]
                  : []),
            ]}
          >
            {description}
          </Typography>
        ) : null}
      </Box>

      {action ? <Box sx={{ flexShrink: 0 }}>{action}</Box> : null}
    </Box>
  );
}