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

interface Props {
  assetType: string
  onAssetTypeChange: (v: string) => void
  areaSqm: string
  onAreaSqmChange: (v: string) => void
  rentPerSqm: string
  onRentPerSqmChange: (v: string) => void
  availableFrom: string
  onAvailableFromChange: (v: string) => void
  description: string
  onDescriptionChange: (v: string) => void
}

export function AreaDetailsSection({
  assetType, onAssetTypeChange,
  areaSqm, onAreaSqmChange,
  rentPerSqm, onRentPerSqmChange,
  availableFrom, onAvailableFromChange,
  description, onDescriptionChange,
}: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Flächendetails</Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <TextField
          select label="Flächentyp" value={assetType}
          onChange={e => onAssetTypeChange(e.target.value)} size="small" fullWidth
        >
          {Object.entries(ASSET_TYPE_LABELS).map(([v, l]) => (
            <MenuItem key={v} value={v}>{l}</MenuItem>
          ))}
        </TextField>

        <TextField
          label="Fläche (m²)" value={areaSqm}
          onChange={e => onAreaSqmChange(e.target.value)}
          size="small" type="number" slotProps={{ htmlInput: { min: 1 } }} fullWidth
        />

        <TextField
          label="Mietpreis (CHF/m²/Jahr)" value={rentPerSqm}
          onChange={e => onRentPerSqmChange(e.target.value)}
          size="small" type="number" slotProps={{ htmlInput: { min: 1 } }} fullWidth
        />

        <TextField
          label="Verfügbar ab" value={availableFrom}
          onChange={e => onAvailableFromChange(e.target.value)}
          size="small" type="date"
          slotProps={{ inputLabel: { shrink: true } }} fullWidth
        />
      </Box>
      <TextField
        label="Beschreibung (optional)" value={description}
        onChange={e => onDescriptionChange(e.target.value)}
        size="small" multiline rows={3} fullWidth sx={{ mt: 2 }}
      />
    </Card>
  )
}
