'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 (
        <ul className="flex items-center justify-start mt-[56px] mb-[32px]">
            {listLink.map((item, idx) => (
                <li
                    key={idx}
                    className={`

                    `}
                >
                    <a href={`#${item.link}`}>
                        <Button
                            className={`
                        !text-[20px] !font-bold !mx-[56px] !py-px
                        ${idx !== 0 && idx !== listLink.length - 1 ?
                                    'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
                                    : ''}
                        ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
                        `}
                            variant="text">
                            {item.name}
                        </Button>
                    </a>
                </li>
            ))}
        </ul>
    )
}

export default Link