'use client';

import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Logo from '@/components/image/Logo';
import { toast } from '@/components/toast/Toast';
import ShareArrowIcon from '@/icons/generated/ShareArrowIcon';
import logWebUserEvent from '@/logging/logWebUserEvent';

type NavigationBarProps = {
  contestId?: string;
  contestSlug?: string | null;
  lockUpText?: string;
};

const NavigationBar: React.FC<NavigationBarProps> = ({
  contestId,
  contestSlug,
  lockUpText = 'Collabs',
}) => {
  const handleShareClick = async () => {
    try {
      const url = window.location.href;
      if (contestId) {
        logWebUserEvent({
          actionName: 'ContestLandingShareClicked',
          context: {
            contestId,
            contestSlug: contestSlug ?? undefined,
            method: 'copy',
          },
        });
      }
      await navigator.clipboard.writeText(url);
      toast({
        title: 'Link copied to clipboard',
        status: 'info',
        duration: 2000,
        isClosable: true,
      });
    } catch (e) {
      toast({
        title: 'Unable to copy link to clipboard',
        status: 'error',
        duration: 2000,
        isClosable: true,
      });
    }
  };
  return (
    <div className='mx-auto flex w-full max-w-[2560px] items-center justify-center md:justify-between'>
      <div className='flex items-center'>
        <div className='flex flex-1 items-center gap-[4px]'>
          <Logo
            href='/home'
            className='h-[13.905px] w-[56.555px]'
            enableDropShadow={false}
          />
          <div className='text-[18.907px] leading-[30.252px] font-medium tracking-[-0.189px] not-italic'>
            {lockUpText}
          </div>
        </div>
      </div>
      <div className='hidden items-center md:flex'>
        <div className='flex flex-1 items-center gap-[8px]'>
          <div className='text-Foreground-Primary hidden text-[14px] leading-[20px] font-normal not-italic'>
            Remix
          </div>
          <Button
            variant={ButtonVariant.Secondary}
            size={ButtonSize.Micro}
            shape={ButtonShape.Pill}
            className='flex hidden h-[32px] w-[32px] items-center justify-center rounded-full'
            icon={<ShareArrowIcon className='h-4 w-4' />}
            onClick={handleShareClick}
          ></Button>
        </div>
      </div>
    </div>
  );
};

export default NavigationBar;