"use client"; // Mark as a Client Component
import { signOut, useSession } from "next-auth/react";

import { useState } from "react";
import Link from "next/link"; // Assuming you're using Next.js
import { Button } from "@/components/ui/button"; // Shadcn UI Button
import {
  Card,
  CardHeader,
  CardContent,
} from "@/components/ui/card"; // Shadcn UI Card
import {
  Table,
  TableCaption,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table"; // Shadcn UI Table
import {
  HomeIcon,
  CogIcon,
  UsersIcon,
  LogOutIcon,
} from "lucide-react"; // Example icons from lucide-react
import router from "next/router";

export default function Dashboard() {
  const [discordServers, setDiscordServers] = useState([
    { id: 1, name: "My Discord Bot", status: "Running" },
    { id: 2, name: "Gaming Bot", status: "Stopped" },
  ]);

  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-800 text-white flex-shrink-0">
        <div className="p-6 text-2xl font-bold border-b border-gray-700">
          MyApp
        </div>
        <nav className="mt-10">
          <Link href="/dashboard">
            <a className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
              <HomeIcon className="w-5 h-5 mr-3" />
              Dashboard
            </a>
          </Link>
          <Link href="/servers">
            <a className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
              <UsersIcon className="w-5 h-5 mr-3" />
              Servers
            </a>
          </Link>
          <Link href="/settings">
            <a className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
              <CogIcon className="w-5 h-5 mr-3" />
              Settings
            </a>
          </Link>

          <button
          className="border border-solid border-black rounded"
          onClick={() => {
            signOut({ redirect: true }).then(() => {
            });

          }}
        >
          <LogOutIcon className="w-5 h-5 mr-3" />
          Sign Out
        </button>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 bg-gray-100 p-8 overflow-auto">
        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>

        {/* Discord Bot Servers */}
        <Card className="mb-6">
          <CardHeader>
            <h2 className="text-xl font-semibold">Discord Bot Servers</h2>
          </CardHeader>
          <CardContent>
            <Table>
              <TableCaption>A list of your Discord bot servers.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[100px]">Server Name</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {discordServers.map((server) => (
                  <TableRow key={server.id}>
                    <TableCell>{server.name}</TableCell>
                    <TableCell>{server.status}</TableCell>
                    <TableCell>
                      <Button variant="outline" className="mr-2">
                        Start
                      </Button>
                      <Button variant="destructive">Stop</Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* Billing Section */}
        <Card className="mb-6">
          <CardHeader>
            <h2 className="text-xl font-semibold">Billing</h2>
          </CardHeader>
          <CardContent>
            <p>Current Plan: Premium</p>
            <p>Next Payment: $15.99 on 2024-11-01</p>
            <Button variant="default" className="mt-4">
              Manage Billing
            </Button>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}


use shadcn ui navbar and fix this bug Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor