import { GuildInfo } from "../../api";
import { Link, useLocation } from "wouter";

type Props = {
    guild: GuildInfo;
};

export const GuildEntry = ({ guild }: Props) => {
    const [loc] = useLocation();
    const currentId = loc.match(/^\/(?<id>\d+)/);

    return (
        <li>
            <Link
                class={
                    currentId !== null && guild.id === currentId.groups.id
                        ? "is-active switch-pane"
                        : "switch-pane"
                }
                href={`/${guild.id}/reminders`}
            >
                <>
                    <span class="guild-name">{guild.name}</span>
                </>
            </Link>
        </li>
    );
};