'use client';

import { useGateValue } from '@statsig/react-bindings';
import { twMerge } from 'tailwind-merge';

import Link from '@/components/link/Link';

import AnimatedLogo from './AnimatedLogo';

type VipBadgeProps = {
  className?: string;
  targetRef?: React.RefObject<HTMLDivElement | SVGSVGElement | null>;
};

const VipBadge: React.FC<VipBadgeProps> = ({ className }) => {
  return (
    <svg
      width='16'
      height='5'
      viewBox='0 0 16 5'
      fill='currentColor'
      xmlns='http://www.w3.org/2000/svg'
      className={className}
    >
      <path d='M0.627676 0.0546875H1.69461C1.78991 0.0546875 1.87655 0.109148 1.9174 0.19579L3.35441 3.20473C3.44353 3.39287 3.71088 3.39287 3.80123 3.20473L5.23825 0.19579C5.2791 0.109148 5.36574 0.0546875 5.46104 0.0546875H6.53292C6.71611 0.0546875 6.83617 0.246537 6.75572 0.411156L4.72583 4.56377C4.68374 4.64917 4.59834 4.7024 4.50304 4.7024H2.64395C2.54864 4.7024 2.46324 4.64794 2.42116 4.56253L0.402406 0.409918C0.321953 0.245299 0.442012 0.0546875 0.625198 0.0546875H0.627676Z' />
      <path d='M7.85204 0.0546875H8.87812C9.01427 0.0546875 9.12567 0.166084 9.12567 0.302235V4.45485C9.12567 4.591 9.01427 4.7024 8.87812 4.7024H7.85204C7.71589 4.7024 7.60449 4.591 7.60449 4.45485V0.302235C7.60449 0.166084 7.71589 0.0546875 7.85204 0.0546875Z' />
      <path d='M10.1738 0.302235C10.1738 0.166084 10.2852 0.0546875 10.4214 0.0546875H13.8115C14.9701 0.0546875 15.6756 0.702025 15.6756 1.80237C15.6756 2.90272 14.9701 3.55006 13.8115 3.55006H11.9426C11.8064 3.55006 11.695 3.66146 11.695 3.79761V4.45485C11.695 4.591 11.5836 4.7024 11.4475 4.7024H10.4214C10.2852 4.7024 10.1738 4.591 10.1738 4.45485V0.302235ZM13.4489 2.27395C13.8821 2.27395 14.09 2.1836 14.09 1.80114C14.09 1.41868 13.8833 1.33575 13.4489 1.33575H11.9426C11.8064 1.33575 11.695 1.44714 11.695 1.58329V2.02641C11.695 2.16256 11.8064 2.27395 11.9426 2.27395H13.4489Z' />
    </svg>
  );
};

type Props = Omit<React.ComponentProps<typeof Link>, 'href'> &
  Partial<Pick<React.ComponentProps<typeof Link>, 'href'>> & {
    enableDropShadow?: boolean;
    href?: string;
    delay?: number;
    isVip?: boolean;
  };

const Logo: React.FC<Props> = (props) => {
  const {
    className,
    enableDropShadow = true,
    href = '/',
    delay,
    isVip: explicitIsVip,
    ...restProps
  } = props;

  const isVipGate = useGateValue('vip-profile-aura');
  const isVip = explicitIsVip ?? isVipGate;

  return (
    <Link
      href={href}
      className={twMerge('relative inline-block h-26 w-26', className)}
      {...restProps}
    >
      <AnimatedLogo
        delay={delay}
        className={twMerge(
          'block h-full w-full object-contain',
          enableDropShadow ? 'drop-shadow-logo md:drop-shadow-none' : ''
        )}
        aria-label='Suno Logo'
        renderBadge={
          isVip
            ? () => <VipBadge className='translate-x-[20%] scale-[1.2]' />
            : undefined
        }
      />
    </Link>
  );
};

export default Logo;