'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React, { useEffect, useState } from 'react';

import { Logo } from '@/components/Logo/Logo';
import type { Header } from '@/payload-types';
import { useHeaderTheme } from '@/providers/HeaderTheme';

interface HeaderClientProps {
  data: Header;
}

export const HeaderClient: React.FC<HeaderClientProps> = ({ data: _data }) => {
  /* Storing the value in a useState to avoid hydration errors */
  const [theme, setTheme] = useState<string | null>(null);
  const { headerTheme, setHeaderTheme } = useHeaderTheme();
  const pathname = usePathname();

  useEffect(() => {
    setHeaderTheme(null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname]);

  useEffect(() => {
    if (headerTheme && headerTheme !== theme) setTheme(headerTheme);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [headerTheme]);

  return (
    <header className='container relative z-20' {...(theme ? { 'data-theme': theme } : {})}>
      <div className='flex items-center justify-between py-8'>
        <Link href={{
          pathname: '/',
          query: {
            utm_source: 'seo',
            utm_medium: 'contenthub'
          }
        }}>
          <Logo loading='eager' priority='high' className='invert dark:invert-0' />
        </Link>
        <Link href={{
          pathname: '/',
          query: {
            utm_source: 'seo',
            utm_medium: 'contenthub'
          }
        }}
          className='rounded-full bg-black px-6 py-2 font-semibold text-white transition-colors hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200'
        >
          Make a song
        </Link>
      </div>
    </header>
  );
};