'use client';

import { useTenant } from '../contexts/tenant-context';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { Button } from './ui/button';
import { Badge } from './ui/badge';

export function ClubSwitcher() {
  const { activeClubId, clubs, setActiveClub } = useTenant();

  const activeClub = clubs.find(c => c.id === activeClubId);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2">
          {activeClub ? (
            <>
              <span>{activeClub.name}</span>
              <Badge variant="secondary" className="ml-2">
                {activeClub.sportType}
              </Badge>
            </>
          ) : (
            'Select Club'
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[200px]">
        <DropdownMenuLabel>My Clubs</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {clubs.map(club => (
          <DropdownMenuItem
            key={club.id}
            onClick={() => setActiveClub(club.id)}
            className="flex items-center justify-between cursor-pointer"
          >
            <span>{club.name}</span>
            <Badge variant="outline" className="ml-2 text-xs">
              {club.sportType}
            </Badge>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}