"use client"

import { useRouter } from "next/navigation"
import { ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useVertical, VERTICALS, VerticalSlug } from "@/contexts/vertical-context"

export function BandSelector() {
    const { current, setCurrent } = useVertical()
    const router = useRouter()

    const handleSelect = (slug: VerticalSlug) => {
        setCurrent(slug)
        router.push(`/${slug}`)
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="ghost"
                    className="flex items-center gap-2 font-bold text-lg"
                    style={{ color: current.color }}
                >
                    <span>{current.emoji}</span>
                    <span>{current.name}</span>
                    <ChevronDown className="h-4 w-4 opacity-50" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-56">
                {VERTICALS.map((vertical) => (
                    <DropdownMenuItem
                        key={vertical.slug}
                        onClick={() => handleSelect(vertical.slug)}
                        className="flex items-center gap-3 cursor-pointer"
                    >
                        <span className="text-lg">{vertical.emoji}</span>
                        <span
                            className={vertical.slug === current.slug ? "font-bold" : ""}
                            style={{ color: vertical.slug === current.slug ? vertical.color : undefined }}
                        >
                            {vertical.name}
                        </span>
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    )
}