'use client';

import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
import { getMembership } from '@/lib/leagueMembership';
import type { MembershipRole } from '@/lib/types/MembershipRole';

interface MembershipStatusProps {
  leagueId: string;
  className?: string;
}

export default function MembershipStatus({ leagueId, className = '' }: MembershipStatusProps) {
  const currentDriverId = useEffectiveDriverId();
  
  if (!currentDriverId) {
    return (
      <span className={`px-3 py-1 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50 ${className}`}>
        Not a Member
      </span>
    );
  }
  
  const membership = getMembership(leagueId, currentDriverId);

  if (!membership) {
    return (
      <span className={`px-3 py-1 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50 ${className}`}>
        Not a Member
      </span>
    );
  }

  const getRoleDisplay = (role: MembershipRole): { text: string; bgColor: string; textColor: string; borderColor: string } => {
    switch (role) {
      case 'owner':
        return {
          text: 'Owner',
          bgColor: 'bg-yellow-500/10',
          textColor: 'text-yellow-500',
          borderColor: 'border-yellow-500/30',
        };
      case 'admin':
        return {
          text: 'Admin',
          bgColor: 'bg-purple-500/10',
          textColor: 'text-purple-400',
          borderColor: 'border-purple-500/30',
        };
      case 'steward':
        return {
          text: 'Steward',
          bgColor: 'bg-blue-500/10',
          textColor: 'text-blue-400',
          borderColor: 'border-blue-500/30',
        };
      case 'member':
        return {
          text: 'Member',
          bgColor: 'bg-primary-blue/10',
          textColor: 'text-primary-blue',
          borderColor: 'border-primary-blue/30',
        };
      default:
        return {
          text: 'Member',
          bgColor: 'bg-primary-blue/10',
          textColor: 'text-primary-blue',
          borderColor: 'border-primary-blue/30',
        };
    }
  };

  const { text, bgColor, textColor, borderColor } = getRoleDisplay(membership.role);

  return (
    <span className={`px-3 py-1 text-xs font-medium ${bgColor} ${textColor} rounded border ${borderColor} ${className}`}>
      {text}
    </span>
  );
}