import { Mail, Star } from 'lucide-react';

interface Props {
  subtitle?: string;
  founded?: boolean;
  facebookFans?: boolean;
  mails?: boolean;
  subscribersCount?: string;
  newsletterCount?: string;
}

export default function MagazineInfo({
  subtitle,
  founded = true,
  facebookFans = true,
  mails = true,
  subscribersCount,
  newsletterCount
}: Props) {
  return (
    <div className='border-t-client-red w-full border-t-2 lg:mx-4 xl:max-w-70'>
      <h3 className='mt-1 mb-2 text-lg font-bold tracking-wider text-neutral-800 xl:mb-4'>
        KBH Magazine
      </h3>
      {subtitle && (
        <p className='mb-6 text-lg font-bold text-neutral-400'>{subtitle}</p>
      )}
      <div className='flex flex-wrap justify-center gap-6 xl:flex-col'>
        {founded && (
          <div className='flex flex-col items-center gap-1'>
            <Star className='size-10 fill-neutral-400 stroke-neutral-400' />
            <p className='text-client-red/70 font-serif text-4xl font-bold xl:text-5xl'>
              2005
            </p>
            <p className='text-center text-lg leading-6 font-bold text-neutral-400'>
              grundlagt
            </p>
          </div>
        )}
        {facebookFans && !!subscribersCount && (
          <div className='flex flex-col items-center gap-1'>
            <svg
              className='size-10 fill-neutral-400'
              xmlns='http://www.w3.org/2000/svg'
              viewBox='0 0 50 50'
            >
              <path d='M32,11h5c0.552,0,1-0.448,1-1V3.263c0-0.524-0.403-0.96-0.925-0.997C35.484,2.153,32.376,2,30.141,2C24,2,20,5.68,20,12.368 V19h-7c-0.552,0-1,0.448-1,1v7c0,0.552,0.448,1,1,1h7v19c0,0.552,0.448,1,1,1h7c0.552,0,1-0.448,1-1V28h7.222 c0.51,0,0.938-0.383,0.994-0.89l0.778-7C38.06,19.518,37.596,19,37,19h-8v-5C29,12.343,30.343,11,32,11z' />
            </svg>
            <p className='text-client-red/70 font-serif text-4xl font-bold xl:text-5xl'>
              {subscribersCount}
            </p>
            <p className='text-center text-lg leading-6 font-bold text-neutral-400'>
              engagerede
              <br />
              Facebook fans
            </p>
          </div>
        )}
        {mails && !!newsletterCount && (
          <div className='flex flex-col items-center gap-1'>
            <Mail className='size-10 fill-neutral-400 stroke-white' />
            <p className='text-client-red/70 font-serif text-4xl font-bold xl:text-5xl'>
              {newsletterCount}
            </p>
            <p className='text-center text-lg leading-6 font-bold text-neutral-400'>
              modtagere af det
              <br />
              ugentlige nyhedsbrev
            </p>
          </div>
        )}
      </div>
    </div>
  );
}