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 ContentAsideProps {
  buttons: ButtonData[];
}

const ContentAside = (props: ContentAsideProps) => {
  const pathname = usePathname();
  return (
    <Card className="sticky top-6 hidden flex-col gap-3 md:flex">
      {props.buttons.map((button) => (
        <Link
          className={`flex h-11 items-center justify-start px-[10px] text-sm font-medium ${
            pathname.includes(button.url)
              ? "bg-gray-100 font-semibold text-blue-500"
              : "text-gray-500"
          }`}
          href={`/content/${button.url}`}
          key={button.label}
        >
          {button.label}
        </Link>
      ))}
    </Card>
  );
};

export default ContentAside;