import React from "react"
import { Crown, Shield, Users } from "lucide-react"

interface RoleBadgeProps {
  role: string
}

export const RoleBadge: React.FC<RoleBadgeProps> = ({ role }) => {
  if (role === "owner") {
    return (
      <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800">
        <Crown size={14} />
        Owner
      </span>
    )
  }

  if (role === "admin") {
    return (
      <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
        <Shield size={14} />
        Admin
      </span>
    )
  }

  return (
    <span className="inline-flex items-center px-3 py-1.5 rounded-lg text-xs font-medium bg-accent text-muted-foreground border border-border">
      <Users size={14} className="mr-1" />
      Member
    </span>
  )
}
