import React from 'react';
import { Text } from '@mantine/core';
import './styles.css';

const FieldBlock = (label: string, value: React.ReactNode) => {
  const displayValue =
    value === null || value === undefined || value === '' ? '-' : value;

  return (
    <div className="field-container" key={label}>
      <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: 0.6 }}>
        {label}
      </Text>
      <div className="field-value">
        <Text size="sm" fw={500} style={{ lineHeight: 1.35, whiteSpace: 'pre-wrap' }}>
          {displayValue}
        </Text>
      </div>
    </div>
  );
};

export default FieldBlock;