'use client'

const ZONE_STYLES = {
  FORBIDDEN: { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-300', label: 'Verboten' },
  RESTRICTED: { bg: 'bg-yellow-100', text: 'text-yellow-700', border: 'border-yellow-300', label: 'Eingeschraenkt' },
  SAFE: { bg: 'bg-green-100', text: 'text-green-700', border: 'border-green-300', label: 'Erlaubt' },
}

export function ZoneBadge({ zone }: { zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE' }) {
  const style = ZONE_STYLES[zone] || ZONE_STYLES.SAFE
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${style.bg} ${style.text} ${style.border}`}>
      {style.label}
    </span>
  )
}