shoc-frontend-new/src/components/common/detail-field.tsx

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

type DetailFieldHighlight = "green" | "yellow" | "red";

type DetailFieldProps = {
  label: string;
  value: string;
  className?: string;
  highlight?: DetailFieldHighlight | "";
};

export function DetailField({ label, value, className, highlight }: DetailFieldProps) {
  const colorClass =
    highlight === "green"
      ? "text-green-600"
      : highlight === "yellow"
        ? "text-yellow-600"
        : highlight === "red"
          ? "text-red-600"
          : undefined;

  return (
    <Box className={className}>
      <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
        {label}
      </Typography>
      <Typography variant="body2" className={colorClass}>
        {value}
      </Typography>
    </Box>
  );
}

export function DetailFieldGrid({ children }: { children: React.ReactNode }) {
  return <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">{children}</Box>;
}