import Link from "next/link";
import { Button } from "@/components/ui/button";
import UserProfile from "./userprofile";
import AdminProfile from "./adminprofile";
import RoleGate from "@/components/auth/role-gate";

const SettingsNavigation = async () => {
    return (
        <div className="mt-[100px]">
            <div className="w-full pl-[30px] pr-[30px] pb-[50px]">
                <UserProfile />
                <RoleGate roles={["ADMIN"]}>
                    <AdminProfile />
                </RoleGate>
            </div>

            <div className="flex flex-grow h-full w-full">
                <ul className="rounded-lg shadow-md flex flex-col w-full justify-between text-center align-center">
                    <li className="text-xs text-gray-200">
                        Settings
                    </li>
                    <li>
                        <Link href={"/settings/connections"} className="m-0 p-0 gap-0">
                            <Button variant="ghost" className="w-full text-lg">
                                Connections
                            </Button>
                        </Link>
                    </li>

                    <li className="text-xs text-gray-200">
                        Text to Speech
                    </li>
                    <li className="">
                        <Link href={"/settings/tts/voices"}>
                            <Button variant="ghost" className="w-full text-lg">
                                Voices
                            </Button>
                        </Link>
                    </li>
                    <li className="">
                        <Link href={"/settings/tts/filters"}>
                            <Button variant="ghost" className="w-full text-lg">
                                Filters
                            </Button>
                        </Link>
                    </li>
                    <li className="">
                        <Link href={"/settings/groups/permissions"}>
                            <Button variant="ghost" className="w-full text-lg">
                                Permissions
                            </Button>
                        </Link>
                    </li>

                    <li className="text-xs text-gray-200">
                        Twitch
                    </li>
                    <li className="">
                        <Link href={"/settings/redemptions"}>
                            <Button variant="ghost" className="w-full text-lg">
                                Channel Redemptions
                            </Button>
                        </Link>
                    </li>

                    <li className="text-xs text-gray-200">
                        API
                    </li>
                    <li className="">
                        <Link href={"/settings/api/keys"}>
                            <Button variant="ghost" className="w-full text-lg">
                                Keys
                            </Button>
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    );
}

export default SettingsNavigation;