import { Box, TextField, Typography } from '@mui/material'
import type { OfferEditableField } from '../../domain/offer'

interface EditableOfferFieldListProps {
  fields: OfferEditableField[]
  values: Record<string, string>
  onChange: (id: string, value: string) => void
}

export function EditableOfferFieldList({ fields, values, onChange }: EditableOfferFieldListProps) {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      {fields.map(f => {
        const value = values[f.id] !== undefined ? values[f.id] : f.value
        return (
          <Box key={f.id}>
            <Typography
              variant="caption"
              sx={{
                color: '#64748b',
                fontWeight: 600,
                fontSize: '0.7rem',
                textTransform: 'uppercase',
                letterSpacing: 0.5,
                mb: 0.5,
                display: 'block',
              }}
            >
              {f.label}
            </Typography>
            <TextField
              fullWidth
              size="small"
              value={value}
              onChange={e => onChange(f.id, e.target.value)}
              multiline={f.fieldType === 'textarea'}
              rows={f.fieldType === 'textarea' ? 3 : undefined}
              sx={{
                '& .MuiInputBase-input': { fontSize: '0.85rem' },
              }}
            />
          </Box>
        )
      })}
    </Box>
  )
}