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

interface Props {
  floorPlanUrl: string
  onFloorPlanUrlChange: (v: string) => void
}

export function FloorPlanUrlSection({ floorPlanUrl, onFloorPlanUrlChange }: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5 }}>Grundriss (optional)</Typography>
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
        URL zu einem Grundrissbild — hilft Interessenten, sich die Fläche vorzustellen.
      </Typography>
      <TextField
        label="Grundriss-URL"
        value={floorPlanUrl}
        onChange={e => onFloorPlanUrlChange(e.target.value)}
        size="small"
        fullWidth
        placeholder="https://…"
      />
      {floorPlanUrl && (
        <Box
          component="img"
          src={floorPlanUrl}
          alt="Grundriss Vorschau"
          sx={{ mt: 2, width: '100%', maxHeight: 300, objectFit: 'contain', borderRadius: 1, border: '1px solid rgba(0,0,0,0.08)', bgcolor: '#f8fafc' }}
        />
      )}
    </Card>
  )
}
