import { Box, Button, Card, Chip, TextField, Typography } from '@mui/material'
import { ImagePlus } from 'lucide-react'

interface Props {
  images: string[]
  imageInput: string
  onImageInputChange: (v: string) => void
  onAdd: () => void
  onRemove: (index: number) => void
}

export function ImageUrlSection({ images, imageInput, onImageInputChange, onAdd, onRemove }: Props) {
  return (
    <Card sx={{ p: 3, mb: 3 }}>
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 2 }}>Bilder (optional)</Typography>
      <Box sx={{ display: 'flex', gap: 1, mb: 1.5 }}>
        <TextField
          label="Bild-URL eingeben"
          value={imageInput}
          onChange={e => onImageInputChange(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); onAdd() } }}
          size="small"
          fullWidth
          placeholder="https://…"
        />
        <Button
          variant="outlined"
          size="small"
          startIcon={<ImagePlus size={15} />}
          onClick={onAdd}
          disabled={!imageInput.trim()}
          sx={{ whiteSpace: 'nowrap', textTransform: 'none' }}
        >
          Hinzufügen
        </Button>
      </Box>
      {images.length > 0 && (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
          {images.map((url, i) => (
            <Chip
              key={i}
              label={url.length > 40 ? url.slice(0, 40) + '…' : url}
              size="small"
              onDelete={() => onRemove(i)}
              sx={{ maxWidth: 300 }}
            />
          ))}
        </Box>
      )}
    </Card>
  )
}
