import { Box, Card, TextField, Typography } from '@mui/material'

interface Props {
  street: string
  onStreetChange: (v: string) => void
  houseNumber: string
  onHouseNumberChange: (v: string) => void
  postalCode: string
  onPostalCodeChange: (v: string) => void
  city: string
  onCityChange: (v: string) => void
}

export function AddressSection({
  street, onStreetChange,
  houseNumber, onHouseNumberChange,
  postalCode, onPostalCodeChange,
  city, onCityChange,
}: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Adresse</Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '3fr 1fr', gap: 2, mb: 2 }}>
        <TextField
          label="Strasse" value={street}
          onChange={e => onStreetChange(e.target.value)} size="small" fullWidth
        />
        <TextField
          label="Nr." value={houseNumber}
          onChange={e => onHouseNumberChange(e.target.value)} size="small" fullWidth
        />
      </Box>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }}>
        <TextField
          label="PLZ" value={postalCode}
          onChange={e => onPostalCodeChange(e.target.value)} size="small" fullWidth
        />
        <TextField
          label="Ort" value={city}
          onChange={e => onCityChange(e.target.value)} size="small" fullWidth
        />
      </Box>
    </Card>
  )
}
