"use client"

import { Button } from "@/components/ui/button"
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Layers } from "lucide-react"

interface FeedFilterProps {
    selectedTiers: string[]
    onChange: (tiers: string[]) => void
}

export function FeedFilter({ selectedTiers, onChange }: FeedFilterProps) {
    const isAll = selectedTiers.length === 0
    const isHeadliners = selectedTiers.length === 1 && selectedTiers[0] === "HEADLINER"
    const isMyBands = selectedTiers.length === 3 // Headliner, Main, Supporting

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-8 gap-2">
                    <Layers className="h-3.5 w-3.5" />
                    {isAll ? "All Shows" : isHeadliners ? "Headliners Only" : "My Bands"}
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>Feed View</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuCheckboxItem
                    checked={isAll}
                    onCheckedChange={() => onChange([])}
                >
                    All Shows (Default)
                </DropdownMenuCheckboxItem>
                <DropdownMenuCheckboxItem
                    checked={isHeadliners}
                    onCheckedChange={() => onChange(["HEADLINER"])}
                >
                    My Headliners
                </DropdownMenuCheckboxItem>
                <DropdownMenuCheckboxItem
                    checked={isMyBands}
                    onCheckedChange={() => onChange(["HEADLINER", "MAIN_STAGE", "SUPPORTING"])}
                >
                    My Bands (All Tiers)
                </DropdownMenuCheckboxItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}
