import React from 'react';
import { Box, Typography } from '@mui/material';
import { InfoGridSkeleton } from './SkeletonPresets';

export interface InfoField {
  label: string;
  value: React.ReactNode;
  fullWidth?: boolean;
}

export interface InfoGridProps {
  fields: InfoField[];
  columns?: 1 | 2;
  isLoading?: boolean;
}

/** Key-value display grid with golden-ratio label proportions. */
export const InfoGrid: React.FC<InfoGridProps> = ({
  fields,
  columns = 1,
  isLoading = false,
}) => {
  if (isLoading) {
    return <InfoGridSkeleton rows={fields.length || 4} />;
  }

  const wrapper = columns === 2
    ? { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 16px' }
    : {};

  return (
    <Box sx={wrapper}>
      {fields.map((field, i) => (
        <Box
          key={i}
          sx={{
            display: 'flex',
            gap: 1,
            py: 0.75,
            borderBottom: '1px solid',
            borderColor: 'divider',
            ...(field.fullWidth && columns === 2 ? { gridColumn: '1 / -1' } : {}),
          }}
        >
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ minWidth: 180, flexShrink: 0 }}
          >
            {field.label}
          </Typography>
          <Typography variant="body2" component="div" sx={{ flex: 1 }}>
            {field.value}
          </Typography>
        </Box>
      ))}
    </Box>
  );
};
