import type { ReactNode } from "react";

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

type FormLabelProps = {
  children: ReactNode;
};

export function RequiredLabel({ children }: FormLabelProps) {
  const theme = useTheme();

  return (
    <Typography
      sx={{
        fontSize: 12,
        fontWeight: 600,
        color: theme.palette.text.primary,
        mb: 0.8,
      }}
    >
      {children} <Box component="span" sx={{ color: "#EF4444" }}>*</Box>
    </Typography>
  );
}

export function FieldLabel({ children }: FormLabelProps) {
  const theme = useTheme();

  return (
    <Typography
      sx={{
        fontSize: 12,
        fontWeight: 500,
        color: theme.palette.text.primary,
        mb: 0.8,
      }}
    >
      {children}
    </Typography>
  );
}