'use client';

import { ArrowLeftFromLine, ArrowRightFromLine } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';

import { Button } from '@/components/ui/common/Button';
import { Hint } from '@/components/ui/elements/Hint';
import { useSidebar } from '@/hooks/useSidebar';

export const SidebarHeader = () => {
  const t = useTranslations('layout.sidebar.header');
  const pathname = usePathname();

  const { isCollapsed, open, close } = useSidebar();

  const label = isCollapsed ? t('expand') : t('collapse');

  return isCollapsed
    ? (
      <div className="mb-4 hidden w-full items-center justify-center pt-4 lg:flex">
        <Hint asChild label={label} side="right">
          <Button size="icon" variant="ghost" onClick={() => { open(); }}>
            <ArrowRightFromLine className="size-4" />
          </Button>
        </Hint>
      </div>
    )
    : (
      <div className="mb-2 flex w-full items-center justify-between p-3 pl-4">
        <h2 className="text-lg font-semibold text-foreground">
          {t('navigation')}
        </h2>

        <Hint asChild label={label} side="right">
          <Button size="icon" variant="ghost" onClick={() => { close(); }}>
            <ArrowLeftFromLine className="size-4" />
          </Button>
        </Hint>
      </div>
    );
};