import { getTranslations } from 'next-intl/server';

import { PricingTable } from '@kit/billing-gateway/marketing';

import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
import billingConfig from '~/config/billing.config';
import pathsConfig from '~/config/paths.config';

import { PricingCalculator } from './_components/pricing-calculator';

export const generateMetadata = async () => {
  const t = await getTranslations('marketing');

  return {
    title: t('pricing'),
  };
};

const paths = {
  signUp: pathsConfig.auth.signUp,
  return: pathsConfig.app.home,
};

async function PricingPage() {
  const t = await getTranslations('marketing');

  return (
    <div className={'flex flex-col space-y-16'}>
      <SitePageHeader title={t('pricing')} subtitle={t('pricingSubtitle')} />

      {/* Pricing tiers */}
      <div className={'container mx-auto'}>
        <PricingTable paths={paths} config={billingConfig} />
      </div>

      {/* Price comparison calculator */}
      <div className={'container mx-auto pb-8 xl:pb-16'}>
        <PricingCalculator />
      </div>
    </div>
  );
}

export default PricingPage;