import { Box, Paper, Typography } from '@mui/material'
import { FileImage } from 'lucide-react'
import { DS_TEXT } from '../../lib/ds'

interface FloorPlan {
  url: string
  label?: string
}

interface Props {
  plans: FloorPlan[]
  mb?: number | string
}

export function FloorPlanSection({ plans, mb }: Props) {
  if (plans.length === 0) return null

  return (
    <Paper sx={{ p: 2.5, ...(mb !== undefined ? { mb } : {}) }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
        <FileImage size={15} color={DS_TEXT.secondary} />
        <Typography variant="h6" sx={{ fontWeight: 700 }}>Grundriss</Typography>
      </Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {plans.map((p, i) => (
          <Box key={i}>
            {p.label && (
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.75, fontWeight: 600 }}>
                {p.label}
              </Typography>
            )}
            <Box
              component="img"
              src={p.url}
              alt={p.label ?? 'Grundriss'}
              sx={{
                width: '100%',
                borderRadius: 1,
                border: '1px solid rgba(0,0,0,0.08)',
                display: 'block',
                objectFit: 'contain',
                maxHeight: 480,
                bgcolor: '#f8fafc',
              }}
            />
          </Box>
        ))}
      </Box>
    </Paper>
  )
}
