import { Routes } from '@/config/routes';
import Link from 'next/link';
import { CircleArrowRight } from 'lucide-react';
import { createHelpers } from '@/lib/trpc/server';
import PostContentRenderer from '../tip-tap/tiptap-renderer/post-content-renderer';

export default async function RestrictBanner({
  hasAccess = true
}: {
  hasAccess?: boolean;
}) {
  if (hasAccess) return null;
  const helpers = await createHelpers();
  const block = await helpers.block.get.fetch({
    key: 'non-subscribed-post-banner'
  });

  return (
    <div className='bg-neutral-200 p-8 text-center'>
      <h5 className='mb-6 text-[22px] font-semibold'>{block?.title}</h5>
      <PostContentRenderer nodeContent={block?.content} />
      <div className='my-10 flex flex-col items-center justify-center gap-6 md:flex-row'>
        <Link
          href={Routes.PAYMENTS.PERSONAL.MAIN}
          className='bg-client-red hover:bg-client-red/80 flex w-60 justify-center gap-x-2 rounded-md p-2 font-bold text-white transition'
        >
          Bliv medlem{' '}
          <CircleArrowRight className='stroke-client-red fill-white' />
        </Link>

        <Link
          href={Routes.PAYMENTS.BUSINESS}
          className='bg-client-red hover:bg-client-red/80 flex w-60 justify-center gap-x-2 rounded-md p-2 font-bold text-white transition'
        >
          Bliv abonnent{' '}
          <CircleArrowRight className='stroke-client-red fill-white' />
        </Link>
      </div>
      <p className='text-lg'>
        Allerede medlem? Log ind her!{' '}
        <Link
          href={Routes.AUTH.SIGN_IN}
          className='text-client-red hover:underline'
        >
          Log ind her!
        </Link>
      </p>
    </div>
  );
}