'use client'

import { cn } from '@/lib/utils'
import { PRIORITY_CONFIG, STATUS_CONFIG } from '@/lib/utils'
import type { Priority, TaskStatus, BadgeType } from '@/types'

// ---- Generic Badge ----
interface BadgeProps {
  children: React.ReactNode
  className?: string
  style?: React.CSSProperties
}
export function Badge({ children, className, style }: BadgeProps) {
  return (
    <span
      className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide', className)}
      style={style}
    >
      {children}
    </span>
  )
}

// ---- Type Badge (HQ / Team / Project) ----
const TYPE_MAP: Record<BadgeType, { label: string; bg: string; color: string }> = {
  hq:      { label: '🏢 HQ',       bg: '#FFF8DC', color: '#B8860B' },
  team:    { label: '👥 Tim',      bg: '#EEF2FF', color: '#4F46E5' },
  project: { label: '📁 Proyek',   bg: '#F0FDF4', color: '#16A34A' },
}
export function TypeBadge({ type }: { type: BadgeType }) {
  const cfg = TYPE_MAP[type]
  return <Badge style={{ background: cfg.bg, color: cfg.color }}>{cfg.label}</Badge>
}

// ---- Priority Badge ----
export function PriorityBadge({ priority }: { priority: Priority }) {
  const cfg = PRIORITY_CONFIG[priority]
  return (
    <Badge style={{ background: cfg.bg, color: cfg.color }}>
      {cfg.icon} {cfg.label}
    </Badge>
  )
}

// ---- Status Badge ----
export function StatusBadge({ status }: { status: TaskStatus }) {
  const cfg = STATUS_CONFIG[status]
  return (
    <Badge style={{ background: cfg.bg, color: cfg.color }}>
      {cfg.label}
    </Badge>
  )
}

// ---- Status Dot ----
export function StatusDot({ active }: { active: boolean }) {
  return (
    <span
      className="inline-block w-2 h-2 rounded-full mr-1.5"
      style={{ background: active ? '#22C55E' : '#9E9E9E' }}
    />
  )
}