'use client'

import { Shield, Eye, Edit3 } from 'lucide-react'
import { useEffect, useState } from 'react'

type Permission = 'owner' | 'editor' | 'viewer'

interface PermissionBadgeProps {
  permission: Permission
  size?: 'sm' | 'md'
}

export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  const config = {
    owner: {
      icon: Shield,
      label: 'Owner',
      className: 'bg-purple-100 text-purple-700 border-purple-200',
    },
    editor: {
      icon: Edit3,
      label: 'Editor',
      className: 'bg-blue-100 text-blue-700 border-blue-200',
    },
    viewer: {
      icon: Eye,
      label: 'Viewer',
      className: 'bg-gray-100 text-gray-700 border-gray-200',
    },
  }

  if (!mounted) {
    return (
      <span className={`inline-flex items-center gap-1.5 rounded-full border font-medium bg-gray-100 text-gray-700 border-gray-200 ${size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'}`}>
        Loading...
      </span>
    )
  }

  const { icon: Icon, label, className } = config[permission]
  const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
  const iconSize = size === 'sm' ? 12 : 14

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border font-medium ${className} ${sizeClasses}`}
    >
      <Icon size={iconSize} />
      {label}
    </span>
  )
}