import SelectForm from './select-form';
import type { AppRouterOutput } from '@/lib/trpc/router';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { PricePeriod } from '@/server/modules/payment/types/price-period.enum';
import { formatPrice } from '@/lib/utils/format-price';

type Props = {
  plan: NonNullable<AppRouterOutput['payment']['plan']['get']>;
};

export default function TariffList(props: Props) {
  const {
    plan: { prices = [] }
  } = props;

  return (
    <div className='flex flex-col justify-center gap-x-4 gap-y-4 sm:flex-row md:gap-x-8'>
      {prices.map((price) => {
        const { tiers, period } = price;
        const finalPrice =
          !!tiers?.length && tiers[tiers.length - 1].unit_amount
            ? +formatPrice(tiers[tiers.length - 1].unit_amount, {
                withCurrency: false,
                withCents: false
              })
            : 0;

        const priceLabel =
          period === PricePeriod.YEAR ? finalPrice / 12 : finalPrice;

        return (
          <article
            key={price.id}
            className='h-full w-full bg-neutral-100 md:max-w-81'
          >
            <h6 className='bg-neutral-600 p-4 text-lg font-bold text-white'>
              {price.name}
            </h6>
            <div className='p-2'>
              <p className='my-7 font-bold'>Fra</p>
              <p className='my-3 text-6xl font-bold'>{priceLabel},-</p>
              <p className='my-3 font-bold'>/ md.</p>
              <p className='my-5 font-bold'>(momsfritaget)</p>
              <PostContentRenderer nodeContent={price.content} />
            </div>

            <div className='mb-8 flex justify-center'>
              {price.tiers && price.tiers.length > 0 && (
                <SelectForm price={price} />
              )}
            </div>
          </article>
        );
      })}
    </div>
  );
}