import { ChevronDown, Hash, Volume2 } from "lucide-react"
import { Button } from "./ui/button"

interface Channel {
    id: string
    name: string
    type: "text" | "voice" | "category"
}

interface ChannelListItemProps {
    channel: Channel
}

export default function ChannelListItem({ channel }: ChannelListItemProps) {
    if (channel.type === "category") {
        return (
            <div className="text-xs flex flex-row justify-between mt-4">
                <div className="grow">
                    <div className="flex items-center gap-1">
                        {channel.name}
                        <ChevronDown className="size-4" />
                    </div>
                </div>
                <div>
                </div>
            </div>
        )
    }

    return (
        <>
            <Button variant="secondary" size="sm" className="justify-start">
                <div className="flex items-center gap-2 max-w-72">
                    <div>
                        {channel.type === "text" && <Hash />}
                        {channel.type === "voice" && <Volume2 />}
                    </div>
                    <div className="truncate">
                        {channel.name}
                    </div>
                </div>
            </Button>
        </>
    )
}