'use client';
import React from 'react';
import { useLocale } from "next-intl";
import { Languages } from 'lucide-react';
import { Separator } from '@/components/ui/separator';
import { SidebarTrigger } from '@/components/ui/sidebar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { locales, localeNames, Locale } from '@/lib/i18n/config';
import { DashboardBreadcrumpTarget } from "@/components/layout/dashboard";

export default function Header() {
  const currentLocale = useLocale() as Locale;

  const handleLocaleChange = (newLocale: Locale) => {
    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000`;
    window.location.reload();
  };

  return (
    <header className='flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12'>
      <div className='flex items-center gap-2 px-4'>
        <SidebarTrigger className='-ml-1' />
        <Separator orientation='vertical' className='mr-2 h-4' />
        <DashboardBreadcrumpTarget />
      </div>

      <div className='flex items-center gap-2 px-4'>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant='ghost' size='sm' className='gap-2'>
              <Languages className='size-4' />
              <span className='uppercase'>{currentLocale}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align='end'>
            {locales.map((locale) => (
              <DropdownMenuItem
                key={locale}
                className={currentLocale === locale ? 'bg-accent' : ''}
                onClick={() => handleLocaleChange(locale)}
              >
                {localeNames[locale]}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}