import type { ReactNode } from "react";

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

import type { LanguageCode } from "../types/notification-setting-types";

type NotificationSettingCardProps = {
  title: string;
  description: string;
  disabled?: boolean;
  language?: LanguageCode;
  titleFontSizeOffset?: number;
  children: ReactNode;
};

export function NotificationSettingCard({
  title,
  description,
  disabled = false,
  language = "en",
  titleFontSizeOffset = 0,
  children,
}: NotificationSettingCardProps) {
  const isKhmer = language === "kh";

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

  const baseTitleFontSize = isKhmer ? 15.5 : 15;

  return (
    <Box
      sx={{
        width: "100%",
        minWidth: 0,
        overflow: "hidden",
        bgcolor: "background.paper",
        border: "1px solid",
        borderColor: "divider",
        borderRadius: 2,
        fontFamily,
      }}
    >
      {/* Card Header - no switch */}
      <Box
        sx={{
          minHeight: isKhmer ? 82 : 72,
          px: { xs: 2, sm: 2.5 },
          py: isKhmer ? 1.4 : 1.5,
          display: "flex",
          alignItems: "center",
          borderBottom: "1px solid",
          borderColor: "divider",
          opacity: disabled ? 0.6 : 1,
        }}
      >
        <Box sx={{ minWidth: 0, flex: 1 }}>
          <Typography
            component="h2"
            sx={{
              color: "text.primary",
              fontFamily,
              fontSize:
                baseTitleFontSize +
                titleFontSizeOffset,
              fontWeight: isKhmer ? 600 : 700,
              lineHeight: isKhmer ? 1.7 : 1.4,
            }}
          >
            {title}
          </Typography>

          <Typography
            sx={{
              mt: isKhmer ? 0.05 : 0.3,
              color: "text.secondary",
              fontFamily,
              fontSize: isKhmer ? 12.5 : 12,
              lineHeight: isKhmer ? 1.8 : 1.5,
            }}
          >
            {description}
          </Typography>
        </Box>
      </Box>

      {children}
    </Box>
  );
}