import React from 'react';

import Link from '@/components/link/Link';
import { DiscordIcon, InstagramIcon, TiktokIcon, TwitterXIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';

const COPYRIGHT_YEAR = new Date()?.getUTCFullYear();

const FooterLink: React.FC<{
  href: string;
  link:
    | 'about'
    | 'careers'
    | 'blog'
    | 'pricing'
    | 'help'
    | 'contact-us'
    | 'community-guidelines'
    | 'faqs'
    | 'create';
  children: React.ReactNode;
}> = ({ href, link, children }) => {
  return (
    <Link
      href={href}
      target='_blank'
      rel='noopener noreferrer'
      className='text-[12px] leading-[155%] font-medium text-[#FAF7F5] transition-colors hover:text-[#FFFFFF] hover:underline'
      onClick={() =>
        logWebUserEvent({
          actionName: 'ContestPageFooterLinkClicked',
          context: { link },
        })
      }
    >
      {children}
    </Link>
  );
};

const FooterSocialLink: React.FC<{
  href: string;
  platform: 'twitter' | 'instagram' | 'tiktok' | 'discord';
  children: React.ReactNode;
}> = ({ href, platform, children }) => {
  return (
    <Link
      href={href}
      className='text-[#FFFFFF] transition-transform hover:scale-[1.05]'
      onClick={() =>
        logWebUserEvent({
          actionName: 'ContestPageSocialLinkClicked',
          context: { platform },
        })
      }
    >
      {children}
    </Link>
  );
};

const ContestFooter: React.FC = () => {
  return (
    <section className='z-50 w-full px-[20px] py-[15px] pb-[50px] md:py-[50px] md:pt-[70px] md:pb-[50px]'>
      <div className='flex w-full flex-col items-start justify-between md:flex-row'>
        <div className='flex w-full flex-2 md:w-auto'>
          <div className='mb-[40px] flex flex-1 flex-col items-start md:mb-0 md:items-start'>
            <div className='pt-[3px] text-[12px] leading-[155%] font-medium text-[#FAF7F5] md:pt-0'>
              © {COPYRIGHT_YEAR} Suno, Inc.
            </div>
          </div>
          <div className='mb-[40px] flex flex-1 flex-col items-end md:mb-0 md:items-center'>
            <div className='flex flex-row gap-[16px]'>
              <div>
                <FooterLink href='https://suno.com/create' link='create'>
                  Create
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/about' link='about'>
                  About
                </FooterLink>
              </div>
              <div>
                <FooterLink href='https://suno.com/pricing' link='pricing'>
                  Subscribe
                </FooterLink>
              </div>
            </div>
          </div>
        </div>
        <div className='flex flex-1 items-center justify-start gap-[16px] md:justify-end'>
          <div className='flex items-center gap-[16px]'>
            <FooterSocialLink
              href='https://twitter.com/sunomusic'
              platform='twitter'
            >
              <TwitterXIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://www.instagram.com/sunomusic/'
              platform='instagram'
            >
              <InstagramIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://www.tiktok.com/@sunomusic'
              platform='tiktok'
            >
              <TiktokIcon className='h-4 w-4' />
            </FooterSocialLink>
            <FooterSocialLink
              href='https://discord.com/invite/suno'
              platform='discord'
            >
              <DiscordIcon className='h-4 w-4' />
            </FooterSocialLink>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContestFooter;