import { ModalVariant } from '@/config/enums/tip-tap';
import VisionModal from './vision-modal';
import Link from 'next/link';
import Image from 'next/image';
import { ImageQuality } from '@/config/enums/image-quality';
import { Routes } from '@/config/routes';

export default function ModalWidget({ props }: { props: { variant: string } }) {
  if (!props) {
    return null;
  }
  const { variant } = props;

  if (variant === ModalVariant.MOBILE_PAY) {
    return (
      <div className='widget-left-col'>
        <div className='border-t-client-blue bg-client-blue/30 grid gap-y-3 border-t p-4'>
          <h6 className='text-2xl leading-[1.1] font-bold text-neutral-800'>
            Kunne du lide artiklen?
          </h6>
          <p className='!font-sans text-sm font-bold text-neutral-800'>
            Debat om Københavns udvikling med et beboerperspektiv fremmer en
            sund(ere) udvikling af byen.
          </p>
          <p className='!font-sans text-sm font-bold text-neutral-800'>
            Støt vores mission med en donation.
          </p>
          <div className='flex justify-center'>
            <Link
              href={Routes.PAYMENTS.PERSONAL.MAIN}
              className='relative flex flex-col items-center bg-[linear-gradient(transparent_calc(100%_-_0.1em),#000_0.1em)] bg-size-[0_100%] bg-no-repeat no-underline transition-all duration-300 ease-[ease-in-out] before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full before:transition-all hover:bg-size-[100%_100%]'
            >
              <Image
                quality={ImageQuality.LOW}
                src='/images/purchase/mobile-pay-logo.png'
                height={60}
                width={70}
                alt='Mobile Pay logo'
                className='h-18 w-22'
              />
              <span className='text-[25px] font-bold text-neutral-800'>
                711911
              </span>
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className='widget-left-col'>
      <div className='border-t-client-blue bg-client-blue/30 grid gap-y-3 border-t p-4'>
        <h6 className='text-2xl leading-[1.1] font-bold text-neutral-800'>
          Har du en vision for København?
        </h6>
        <p className='!font-sans text-xl leading-[1.1] font-bold text-white'>
          Alle kan sende en idé ind som andre kan stemme op og ned
        </p>
        <div className='w-fit justify-self-end'>
          <VisionModal />
        </div>
      </div>
    </div>
  );
}