import { Box, Grid, Typography } from "@mui/material";
import { SPACING } from "../../data/spacing";

export const LabelField = ({ label, children }) => {
  return (
    <Grid container xs={12}>
      <Box
        style={{
          borderRadius: 8,
          border: "1px solid #e6e6e6",
          position: "relative",
          width: "100%",
        }}
        p={{
          xs: "8px 4px 6px",
          sm: "10px 8px 8px",
        }}
      >
        {label && (
          <Typography
            variant="body2"
            style={{
              position: "absolute",
              top: 0,
              transform: "translateY(-50%)",
              right: 8,
              backgroundColor: "white",
              padding: SPACING.SMALL,
              fontSize: {
                xs: "12px",
                sm: "14px",
              },
              color: "#797979",
            }}
          >
            {label}
          </Typography>
        )}
        {children}
      </Box>
    </Grid>
  );
};
