import React from 'react'
import './ZoneTag.css'

export type ZoneStatus = 'FREE' | 'CONDITIONAL' | 'FORBIDDEN'

const ZONE_LABELS: Record<ZoneStatus, string> = {
  FREE: 'Livre',
  CONDITIONAL: 'Condicionada',
  FORBIDDEN: 'Proibida',
}

export interface ZoneTagProps {
  zone: ZoneStatus
  className?: string
}

export function ZoneTag({ zone, className = '' }: ZoneTagProps) {
  return (
    <span
      className={`ov-zone-tag${className ? ` ${className}` : ''}`}
      data-zone={zone}
      role="status"
      aria-label={`Zona ${ZONE_LABELS[zone]}`}
    >
      <span className="ov-zone-dot" aria-hidden="true" />
      {ZONE_LABELS[zone]}
    </span>
  )
}