import React from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import HeroText from '@/components/title/HeroText';
import logWebUserEvent from '@/logging/logWebUserEvent';

import { SectionViewLogger } from '../HomePageClient';
import InfiniteCarousel from '../components/InfiniteCarousel';
import { VideoHero, VideoItem } from '../components/VideoItem';

interface FeaturedCreatorsSectionProps {
  id?: string;
  heading?: string;
  subhead?: string;
  videos?: VideoHero[];
  onCreateRedirect: () => void;
  signUpButton?: string;
}

const FeaturedCreatorsSection: React.FC<FeaturedCreatorsSectionProps> = ({
  id,
  heading = 'Explore and get inspired',
  subhead = 'Join the #1 AI music generator. Create songs, remix tracks, make beats, and share your music with millions — free forever.',
  videos = [],
  onCreateRedirect,
  signUpButton = 'Sign up for free',
}) => {
  return (
    <section id={id} className='bg-background-primary md:mt-[160px]'>
      <div className='mx-auto max-w-[349px] text-center md:max-w-[744px]'>
        <SectionViewLogger sectionName='ExploreAndGetInspired' />
        <HeroText
          text={heading}
          subtitle={subhead}
          subtitleClasses='max-w-[390px] mx-auto text-center text-[16px] leading-6 md:text-[18px]'
        />
      </div>
      <div className='mx-auto mt-[50px] max-w-[1254px]'>
        <InfiniteCarousel
          itemWidth={{ mobile: 234, desktop: 234 }}
          itemHeight={{ mobile: 445, desktop: 445 }}
          containerHeight={{ mobile: 445, desktop: 445 }}
          autoScroll
          scrollInterval={2000}
          stopOnInteraction={true}
          gap={21}
          mobileGap={21}
          disableAutoplay={true}
        >
          {videos.map((video, index) => (
            <VideoItem key={index} video={video} onClick={onCreateRedirect} />
          ))}
        </InfiniteCarousel>
      </div>
      <div className='mt-[60px] mb-[40px] text-center md:mb-[120px]'>
        <Button
          variant={ButtonVariant.Aura}
          size={ButtonSize.Large}
          shape={ButtonShape.Pill}
          onClick={() => {
            onCreateRedirect();
            logWebUserEvent({
              actionName: 'HomePageSignUpButtonClicked',
            });
          }}
          className='px-[78px]'
        >
          {signUpButton}
        </Button>
      </div>
    </section>
  );
};

export default FeaturedCreatorsSection;