import { Box, Tooltip, Typography } from '@mui/material'
import { Flame } from 'lucide-react'
import { getHeatLevel, heatTooltip } from '../../lib/propertyHeat'
import { DS_COLORS } from '../../lib/ds'

interface Props {
  propertyId: string | undefined
  size?: 'sm' | 'md'
}

export function HeatBadge({ propertyId, size = 'md' }: Props) {
  const level = getHeatLevel(propertyId)
  if (!level || !propertyId) return null

  const isVeryHot = level === 'VERY_HOT'
  const tooltip = heatTooltip(propertyId)
  const colors = isVeryHot ? DS_COLORS.heat.VERY_HOT : DS_COLORS.heat.HOT

  const iconSize = size === 'sm' ? 10 : 12
  const fontSize = size === 'sm' ? '0.6rem' : '0.65rem'
  const label    = isVeryHot ? 'Sehr gefragt' : 'Gefragt'

  return (
    <Tooltip title={tooltip} placement="top" arrow>
      <Box
        sx={{
          display: 'inline-flex', alignItems: 'center', gap: 0.35,
          bgcolor: colors.bg, border: `1px solid ${colors.border}`, borderRadius: 1,
          px: size === 'sm' ? 0.6 : 0.75, py: 0.15,
          cursor: 'default',
        }}
      >
        <Flame size={iconSize} color={colors.icon} fill={isVeryHot ? colors.icon : 'none'} />
        <Typography sx={{ fontSize, fontWeight: 700, color: colors.text, lineHeight: 1.2 }}>
          {label}
        </Typography>
      </Box>
    </Tooltip>
  )
}