import { Box, Card, MenuItem, TextField, Typography } from '@mui/material'
import { SOFT_FACTORS, LEVEL_OPTIONS } from '../../pages/supply/newListingConstants'

interface Props {
  softLevels: Record<string, string>
  onChange: (key: string, value: string) => void
}

export function SoftFactorsSection({ softLevels, onChange }: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Box sx={{ mb: 2 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>Lage & Ausstrahlung</Typography>
        <Typography variant="caption" color="text.secondary">
          Diese Angaben verbessern die Match-Qualität erheblich.
        </Typography>
      </Box>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 2 }}>
        {SOFT_FACTORS.map(({ key, label }) => (
          <TextField
            key={key}
            select
            label={label}
            value={softLevels[key] ?? ''}
            onChange={e => onChange(key, e.target.value)}
            size="small"
            fullWidth
          >
            {LEVEL_OPTIONS.map(o => (
              <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
            ))}
          </TextField>
        ))}
      </Box>
    </Card>
  )
}