'use client';

import { observer } from 'mobx-react-lite';

import HeroText from '@/components/title/HeroText';
import {
  useUsagePlanDescriptionsResponse,
  useUsagePlans,
} from '@/hooks/usePricing';

import { SectionViewLogger } from '../HomePageClient';
import { SplashPagePlans } from '../components/SplashPagePlans';

interface PricingSectionProps {
  id?: string;
  heading?: string;
  subheading?: string;
  toggleMonthly?: string;
  toggleYearly?: string;
}

export const PricingSection = observer(
  ({
    id = 'pricing-section',
    heading = 'Start making music for free',
    subheading = 'Select the plan that best fits your needs',
    toggleMonthly,
    toggleYearly,
  }: PricingSectionProps = {}) => {
    const { data: availablePlans } = useUsagePlans();
    const { data: descriptionsResponse } = useUsagePlanDescriptionsResponse();

    return (
      <section
        id={id}
        className='relative flex w-full flex-col items-center overflow-hidden bg-background-primary'
      >
        <div className='relative z-10 mt-4 flex w-full max-w-[1280px] flex-col items-center p-6 md:mt-[120px]'>
          <SectionViewLogger sectionName='PricingPlans' />
          <HeroText
            text={heading}
            titleClasses='max-w-[300px] md:max-w-[600px] text-center'
            subtitle={subheading}
            subtitleClasses='text-white/70 max-w-[390px] mx-auto text-center text-[16px] leading-6 md:text-[18px]'
          />
          <SplashPagePlans
            plans={availablePlans || []}
            currentSubscription={null}
            usagePlanDescriptions={
              descriptionsResponse?.usage_plan_descriptions || {}
            }
            ctaButtons={descriptionsResponse?.cta_buttons ?? null}
            toggleMonthly={toggleMonthly}
            toggleYearly={toggleYearly}
          />
        </div>
      </section>
    );
  }
);