'use client';

import { Routes } from '@/config/routes';
import Link from 'next/link';
import { ArrowBigRight, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useSession } from '@/lib/auth/auth-client';
import { useEffect, useState } from 'react';

export default function MemberBanner() {
  const { data: session, isPending } = useSession();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (!isPending && !session?.user) {
      setIsVisible(true);
    }
  }, [isPending, session]);

  if (!isVisible) {
    return null;
  }

  return (
    <div className='fixed bottom-0 left-0 z-30 w-full bg-sky-800 text-white'>
      <div className='container mx-auto flex w-full max-w-[1360px] justify-between px-3 py-4 md:px-7 md:py-5'>
        <Link
          href={Routes.PAYMENTS.PERSONAL.MAIN}
          className='group flex w-full items-center gap-4'
        >
          <span className='flex w-auto items-center justify-center rounded-full bg-white p-1'>
            <ArrowBigRight className='size-8 stroke-sky-800 md:size-10' />
          </span>
          <span className='flex flex-col items-start'>
            <span className='relative font-bold after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 group-hover:after:w-full md:text-xl'>
              Endnu ikke medlem?
            </span>
            <span className='relative font-bold after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 group-hover:after:w-full md:text-xl'>
              Fra kun 29,- om måneden kan du følge byens udvikling
            </span>
          </span>
        </Link>

        <Button
          variant='ghost'
          size='icon'
          className='hover:bg-unset size-min cursor-pointer p-0 hover:text-white'
          aria-label='Close banner'
          onClick={() => setIsVisible(false)}
        >
          <X className='size-6 stroke-current' />
        </Button>
      </div>
    </div>
  );
}