import { Mentions, Pill } from "@components/PillMentions";
import { ReactElement } from "react";

export function ChannelBar({servername}: {servername: string}): ReactElement {
  return (
    <div className="channel-bar">
      <h2>{servername}</h2>
      <Channel channelName="meow" mentions={0} unread={true} muted={false} />
    </div>
  )
}

function Channel({channelName, mentions, unread, muted}: {channelName: string, mentions: number, unread: boolean, muted: boolean}): ReactElement {
  return (
    <div className="channel">
      <Pill unread={unread} muted={muted} open={false} hover={false} />
      <span className="channelname">{channelName}</span>
      <Mentions count={mentions} />
    </div>
  )
}