shoc-frontend-new/src/app/(protected)/locations/_components/state-area-cell.tsx

import { Stack, Typography } from "@mui/material";
import { getAreaForState, normalizeStateCode } from "@/data/areas";

/** State abbreviation with the derived area as secondary text. */
export function StateAreaCell({ state }: { state?: string | null }) {
  const code = normalizeStateCode(state);
  const area = code === null ? null : getAreaForState(code);

  if (code === null) {
    return (
      <Typography variant="body2" component="span">
        {state?.trim() || "—"}
      </Typography>
    );
  }

  return (
    <Stack spacing={0}>
      <Typography variant="body2" component="span">
        {code}
      </Typography>
      {area !== null && (
        <Typography
          variant="caption"
          component="span"
          sx={{
            color: "text.secondary",
          }}
        >
          {area}
        </Typography>
      )}
    </Stack>
  );
}