"use client";

import Navbar from "@/components/navbar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "@/components/ui/card";
import { SignInButton, SignUpButton, SignedIn, UserButton, auth, clerkClient } from "@clerk/nextjs";
import {useUser} from "@clerk/nextjs"
import { Gamepad, PanelsTopLeft, PcCase, Sidebar } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useLayoutEffect, useRef, useState } from "react";

export default function ProjectsPage() {

  let currentCategory = "Placeholder"

  const router = useRouter()

  const categories = [
    {
      name: "Web",
      icon: PanelsTopLeft,
      bgColor: "bg-green-500/10",
      textColor: "bg-green-500",
    },
    {
      name: "Software",
      icon: PcCase,
      bgColor: "bg-blue-500/10",
      textColor: "bg-blue-500",
    },
    {
      name: "Web",
      icon: Gamepad,
      bgColor: "bg-purple-500/10",
      textColor: "bg-purple-500",
    },

  ]

  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    const handleResize = () => {
      setHeight(elementRef.current.offsetHeight);
    };
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  
  return (
    <div className="flex flex-row justify-center items-center">
      <div className="flex flex-col gap-y-2 bg-red-500 sm:p-5 lg:p-12" style={{ 'height' : height}}>
        <Button >
          Software
        </Button>
        <Button>
          Web Development
        </Button>
        <Button>
          Games Development
        </Button>
      </div>
      <div ref={elementRef} className="w-8/12">
        <Card className="p-5">
          <CardTitle className="text-center py-3">
            Projects - {currentCategory}
          </CardTitle>
          <CardDescription className="text-center py-3 border-b-2 border-slate-500/30">
            Projects I have worked on 
          </CardDescription>
          <CardContent>
          </CardContent>
          <CardFooter>
            Test
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}

I have a card here, and i have a sidebar with buttons which are meant to load the content of the card when they are clicked, but i do not know how to do this. I have looked at some solutions and attempted to implement them however it was just a mess so i removed the updated code. Pictures coming