"use client";
import { Button } from "@mui/material";
import { useState } from "react";

const listLink = [
  { name: "درباره پزشک", link: "about-doctor" },
  { name: "موقعیت مکانی ", link: "location" },
  { name: "نظرات", link: "comments" },
];

function Link() {
  const [activeId, setActiveId] = useState(0);

  return (
    <>
      <span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
      <ul className="flex lg:mt-[56px] items-center justify-evenly lg:justify-start mb-[32px]">
        {listLink.map((item, idx) => (
          <li key={idx} className="flex w-full lg:w-fit relative">
            <a href={`#${item.link}`} className="mx-auto">
              <Button
                onClick={() => setActiveId(idx)}
                className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1 ${ activeId === idx ? "!text-[#F17732]" : "!text-[#525252]" } `}
                variant="text"
              >
                {item.name}
              </Button>
            </a>
            {listLink.length > idx + 1 && (
              <span
                className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px] absolute left-0 lg:relative"
              ></span>
            )}
          </li>
        ))}
      </ul>
    </>
  );
}

export default Link;