"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

import Card from "@/components/ui/card/card";

interface ButtonData {
  label: string;
  url: string;
}

interface ProfileAsideProps {
  buttons: ButtonData[];
}

const ProfileAside = (props: ProfileAsideProps) => {
  const pathname = usePathname();

  return (
    <Card className="flex flex-col gap-3">
      {props.buttons.map((button) => (
        <Link
          className={`flex h-11 items-center justify-start px-[10px] text-sm font-medium ${
            pathname === `/profile/${button.url}` ||
            (pathname === "/profile" && button.url === "")
              ? "bg-gray-100 font-semibold text-blue-500"
              : "text-gray-500"
          }`}
          href={`/profile/${button.url}`}
          key={button.label}
        >
          {button.label}
        </Link>
      ))}
    </Card>
  );
};

export default ProfileAside;