"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { useAppLanguage } from "@/components/providers/app-language-provider";

export type CefpAddIssueFieldProps = {
  label: string;
  required?: boolean;
  error?: string;
  children: ReactNode;
};

export function CefpAddIssueField({
  label,
  required = false,
  error,
  children,
}: CefpAddIssueFieldProps) {
  const { language } = useAppLanguage();
  const isKhmer = language === "kh";

  const fontFamily = isKhmer
    ? '"Battambang", "Kantumruy Pro", sans-serif'
    : '"Inter", "Segoe UI", Arial, sans-serif';

  return (
    <Box sx={{ width: "100%" }}>
      <Typography
        component="label"
        sx={{
          mb: 1,
          display: "block",
          color: "text.secondary",
          fontFamily,
          fontSize: 13,
          fontWeight: 500,
          lineHeight: 1.4,
        }}
      >
        {label}

        {required ? (
          <Box
            component="span"
            sx={{
              ml: 0.5,
              color: "error.main",
            }}
          >
            *
          </Box>
        ) : null}
      </Typography>

      {children}

      {error ? (
        <Typography
          role="alert"
          sx={{
            mt: 0.75,
            mb: 0,
            color: "error.main",
            fontFamily,
            fontSize: 12,
            lineHeight: 1.4,
          }}
        >
          {error}
        </Typography>
      ) : null}
    </Box>
  );
}