import React from 'react';

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

import { SectionViewLogger } from '../HomePageClient';
import { HighlightItemProps } from '../components/HighlightItem';
import ScrollableCardStack from '../components/ScrollableCardStack';

interface FeatureHighlightsSectionProps {
  id?: string;
  highlights: HighlightItemProps[];
  heading?: string;
}

const FeatureHighlightsSection: React.FC<FeatureHighlightsSectionProps> = ({
  id,
  highlights,
  heading = 'Everything you need to make music your way',
}) => {
  return (
    <section id={id} className='w-full bg-background-primary px-4 py-[100px]'>
      <div className='mx-auto max-w-[1200px] justify-center'>
        <SectionViewLogger sectionName='FeatureHighlights' />
        <HeroText
          text={heading}
          titleClasses='whitespace-pre-line max-w-[760px]'
          subtitle={undefined}
          desktopFontSize='lg:text-[72px]'
          desktopLeading='lg:leading-[64px]'
          mobileFontSize='text-[35px]'
          mobileLeading='leading-[35px]'
        />
        <div className='mb-[72px]' />

        <div className='mb-12'>
          <ScrollableCardStack highlights={highlights.slice(0, 3)} />
        </div>

        <div>
          <ScrollableCardStack highlights={highlights.slice(3, 6)} />
        </div>
      </div>
    </section>
  );
};

export default FeatureHighlightsSection;