import { Box, Typography } from '@mui/material'
import { ConfidenceFieldBadge } from './ConfidenceFieldBadge'

interface Props {
  label: string
  value: string
  confidence: number
  missing?: boolean
}

export function ExtractedFieldRow({ label, value, confidence, missing = false }: Props) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        gap: 1,
        py: 1,
        borderBottom: '1px solid #f1f5f9',
        opacity: missing ? 0.55 : 1,
      }}
    >
      <Box sx={{ flex: 1 }}>
        <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block' }}>
          {label}
        </Typography>
        <Typography variant="body2" sx={{ fontStyle: missing ? 'italic' : 'normal' }}>
          {value}
        </Typography>
      </Box>
      <ConfidenceFieldBadge confidence={confidence} />
    </Box>
  )
}