import Link from "next/link";

export default function FAQSidebar() {
    return (
        <aside className="w-full lg:w-64 flex-shrink-0">
            <div className="bg-[#f0f4f2] dark:bg-gray-800 rounded-xl p-6 sticky top-24">
                <h3 className="text-xs font-bold text-faq-primary uppercase tracking-wider mb-4">
                    Categories
                </h3>
                <nav className="flex flex-col space-y-1">
                    <Link
                        href="/faq"
                        className="flex items-center justify-between px-4 py-3 rounded-lg bg-faq-primary/10 text-faq-primary font-semibold transition-colors"
                    >
                        <span>General</span>
                        <span className="material-symbols-outlined text-[20px]">
                            chevron_right
                        </span>
                    </Link>
                    <Link
                        href="/services"
                        className="flex items-center justify-between px-4 py-3 rounded-lg text-faq-charcoal-light dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-faq-primary transition-colors font-medium"
                    >
                        <span>Services</span>
                    </Link>
                    <Link
                        href="/pricing"
                        className="flex items-center justify-between px-4 py-3 rounded-lg text-faq-charcoal-light dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-faq-primary transition-colors font-medium"
                    >
                        <span>Pricing</span>
                    </Link>
                    <Link
                        href="/faq"
                        className="flex items-center justify-between px-4 py-3 rounded-lg text-faq-charcoal-light dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-faq-primary transition-colors font-medium"
                    >
                        <span>Technical</span>
                    </Link>
                    <Link
                        href="/terms-and-conditions"
                        className="flex items-center justify-between px-4 py-3 rounded-lg text-faq-charcoal-light dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-faq-primary transition-colors font-medium"
                    >
                        <span>Legal</span>
                    </Link>
                </nav>
            </div>
        </aside>
    );
}
