import { Button, Input, Sheet, SheetContent, SheetTrigger } from "@/ui";

import { t } from "i18next";
import { MenuIcon, Package2Icon, SearchIcon } from "lucide-react";
import { Trans } from "react-i18next";
import { Link } from "react-router-dom";
import { UeckoLogo } from "../UeckoLogo";
import { UserButton } from "./components/UserButton";

export const LayoutHeader = () => {
  return (
    <header className='sticky top-0 z-10 flex items-center h-16 gap-8 px-4 border-b bg-accent md:px-6'>
      <nav className='flex-col hidden gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6'>
        <Link to='/' className='flex items-center font-semibold'>
          <UeckoLogo className='w-24' />
          <span className='sr-only'>Uecko</span>
        </Link>
        <Link to='/home' className='transition-colors text-muted-foreground hover:text-foreground'>
          <Trans i18nKey='main_menu.home' />
        </Link>
        <Link
          to='/quotes'
          className='transition-colors text-muted-foreground hover:text-foreground'
        >
          <Trans i18nKey='main_menu.quotes' />
        </Link>
        <Link
          to='/catalog'
          className='transition-colors text-muted-foreground hover:text-foreground'
        >
          <Trans i18nKey='main_menu.catalog' />
        </Link>
        <Link
          to='/dealers'
          className='transition-colors text-muted-foreground hover:text-foreground'
        >
          <Trans i18nKey='main_menu.dealers' />
        </Link>
        <Link to='/settings' className='transition-colors text-foreground hover:text-foreground'>
          <Trans i18nKey='main_menu.settings' />
        </Link>
      </nav>
      <Sheet>
        <SheetTrigger asChild>
          <Button variant='outline' size='icon' className='shrink-0 md:hidden'>
            <MenuIcon className='w-5 h-5' />
            <span className='sr-only'>Toggle navigation menu</span>
          </Button>
        </SheetTrigger>
        <SheetContent side='left'>
          <nav className='grid gap-6 text-lg font-medium'>
            <Link to='/' className='flex items-center gap-2 text-lg font-semibold'>
              <Package2Icon className='w-6 h-6' />
              <span className='sr-only'>Uecko</span>
            </Link>
            <Link to='/home' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.home' />
            </Link>
            <Link to='/quotes' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.quotes' />
            </Link>
            <Link to='/catalog' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.catalog' />
            </Link>
            <Link to='/dealers' className='text-muted-foreground hover:text-foreground'>
              <Trans i18nKey='main_menu.dealers' />
            </Link>
            <Link to='/settings' className='hover:text-foreground'>
              <Trans i18nKey='main_menu.settings' />
            </Link>
          </nav>
        </SheetContent>
      </Sheet>
      <div className='flex items-center w-full gap-4 md:ml-auto md:gap-2 lg:gap-4'>
        <form className='flex-1 ml-auto'>
          <div className='relative'>
            <SearchIcon className='absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground' />
            <Input
              type='search'
              placeholder={t("main_menu.search_placeholder")}
              className='pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px] xl:w-[550px] 2xl:w-[750px]'
            />
          </div>
        </form>
        <UserButton />
      </div>
    </header>
  );
};

LayoutHeader.displayName = "LayoutHeader";