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

interface Props {
  floor: string
  onFloorChange: (v: string) => void
  fitOut: string
  onFitOutChange: (v: string) => void
  parking: string
  onParkingChange: (v: string) => void
  ceilingHeight: string
  onCeilingHeightChange: (v: string) => void
}

export function TechnicalDetailsSection({
  floor, onFloorChange,
  fitOut, onFitOutChange,
  parking, onParkingChange,
  ceilingHeight, onCeilingHeightChange,
}: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Technische Details (optional)</Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 2 }}>
        <TextField
          label="Stockwerk" value={floor}
          onChange={e => onFloorChange(e.target.value)}
          size="small" type="number" fullWidth placeholder="0 = EG"
        />
        <TextField
          select label="Ausbaustandard" value={fitOut}
          onChange={e => onFitOutChange(e.target.value)} size="small" fullWidth
        >
          {FIT_OUT_OPTIONS.map(o => (
            <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
          ))}
        </TextField>
        <TextField
          label="Parkplätze" value={parking}
          onChange={e => onParkingChange(e.target.value)}
          size="small" type="number" inputProps={{ min: 0 }} fullWidth
        />
        <TextField
          label="Deckenhöhe (m)" value={ceilingHeight}
          onChange={e => onCeilingHeightChange(e.target.value)}
          size="small" type="number" inputProps={{ step: 0.1, min: 2 }} fullWidth
        />
      </Box>
    </Card>
  )
}
