import { Stack, Text, StackProps } from '@mantine/core';
import React from 'react';

export interface FieldValueProps extends StackProps {
  label: React.ReactNode;
  value?: React.ReactNode;
  render?: (value?: React.ReactNode) => React.ReactNode;
}

export function FieldValue({ label, value, render, ...stackProps }: FieldValueProps) {
  return (
    <Stack gap={4} {...stackProps}>
      <Text size="xs" fw={600}>
        {label}
      </Text>
      {render ? (
        render(value)
      ) : (
        <Text size="sm" fw={500}>
          {value || '-'}
        </Text>
      )}
    </Stack>
  );
}