import { Accordion } from '@/shared/ui/accordion';
import { Button } from '@/shared/ui/button';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/shared/ui/sheet';
import { Menu } from 'lucide-react';
import { getMenu } from '../lib/data';
import RenderMobileMenuItem from './RenderMobileMenuItem';
import { ChangeLang } from './ChangeLang';
import Link from 'next/link';
import { AuthButtons } from './authButtons';
import { useTranslations } from 'next-intl';

const Navbar = () => {
  const t = useTranslations('Navbar');
  const menu = getMenu(t);

  return (
    <section className="py-4 flex items-center justify-center w-full ">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        {/* Desktop Menu */}
        <nav className="justify-between flex max-sm:flex-col gap-5">
          <div className="flex items-center justify-between gap-6">
            {/* Logo */}
            <Link
              href={'/'}
              className="flex items-center gap-2 text-2xl font-bold "
            >
              {t('logo')}
            </Link>
            <div className="flex sm:hidden">
              <ChangeLang />
            </div>
          </div>
          <AuthButtons />
        </nav>

        {/* Mobile Menu */}
        <div className="hidden">
          <div className="flex items-center justify-between">
            {/* Logo */}
            <Link href={'/'} className="flex items-center gap-2">
              {t('logo')}
            </Link>
            <Sheet>
              <div className="space-x-2">
                <ChangeLang />
                <SheetTrigger asChild>
                  <Button variant="outline" size="icon">
                    <Menu className="size-4" />
                  </Button>
                </SheetTrigger>
              </div>
              <SheetContent className="overflow-y-auto">
                <SheetHeader>
                  <SheetTitle>
                    <Link href={'/'} className="flex items-center gap-2">
                      {t('logo')}
                    </Link>
                  </SheetTitle>
                </SheetHeader>
                <div className="flex flex-col gap-6 p-4">
                  <Accordion
                    type="single"
                    collapsible
                    className="flex w-full flex-col gap-4"
                  >
                    {menu.map((item) => RenderMobileMenuItem(item))}
                  </Accordion>
                  <AuthButtons />
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Navbar;