import { FC } from 'react';

import HeroText from '@/components/title/HeroText';

import { SectionViewLogger } from '../HomePageClient';
import InfiniteCarousel from '../components/InfiniteCarousel';
import { SongHero, SongItem } from '../components/SongItem';

interface FeaturedSongsSectionProps {
  id?: string;
  heading: string;
  subheading: string;
  songs: SongHero[];
  onSongClick: (song: SongHero) => void;
  onLikeClick?: (song: SongHero) => void;
}

const FeaturedSongsSection: FC<FeaturedSongsSectionProps> = ({
  id,
  heading,
  subheading,
  songs,
  onSongClick,
  onLikeClick,
}) => {
  return (
    <section id={id} className='bg-background-primary'>
      <div className='mx-auto mt-20 max-w-[800px] px-[10px]'>
        <div className='text-center'>
          <SectionViewLogger sectionName='MindBlowingSongQuality' />
          <HeroText
            text={heading}
            subtitle={subheading}
            desktopFontSize='lg:text-[72px]'
            desktopLeading='lg:leading-[64px]'
            mobileFontSize='text-[35px]'
            mobileLeading='leading-[35px]'
            subtitleClasses='max-w-[615px] mx-auto text-center text-[16px] leading-6 md:text-[18px]'
            titleClasses='max-w-[576px] text-center mx-auto'
          />
        </div>
      </div>
      <div className='mx-auto mt-[40px] mb-0 w-full max-w-[2508px] md:mt-[60px] md:mb-[150px]'>
        <InfiniteCarousel
          itemWidth={{ mobile: 192, desktop: 228.22 }}
          itemHeight={{ mobile: 367.5, desktop: 380 }}
          containerHeight={{ mobile: 367.5, desktop: 380 }}
          autoScroll
          scrollInterval={2000}
          gap={38.25}
          mobileGap={16.5}
          align='center'
          stopOnInteraction={true}
          disableAutoplay={true}
        >
          {songs.map((song) => (
            <SongItem
              key={song.id}
              song={song}
              onClick={() => onSongClick(song)}
              handleLike={onLikeClick ? () => onLikeClick(song) : undefined}
              audioUrl={song.audioUrl}
            />
          ))}
        </InfiniteCarousel>
      </div>
    </section>
  );
};

export default FeaturedSongsSection;