import React from "react";
import { Box, Typography, Avatar } from "@mui/material";
import type { FieldConfig } from "../../types";
import { ListCellRenderer } from "./ListCellRenderer";
import { CurrencyField } from "./renderers/CurrencyField";

interface DetailFieldProps {
  field: FieldConfig;
  value: any;
  displayFormat?: string;
  basePath?: string;
}

export function DetailFieldRenderer({ field, value, displayFormat, basePath }: DetailFieldProps) {
  if (field.hidden?.detail) return null;

  return (
    <Box sx={{ mb: 2 }}>
      <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
        {field.label}
      </Typography>
      {field.uiType === "currency" ? (
        <CurrencyField value={Number(value)} large />
      ) : field.uiType === "image" ? (
        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
      ) : (
        <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
      )}
    </Box>
  );
}