import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import useSWR from 'swr';
import FadeIn from 'react-fade-in';

import { socials } from 'components/data/socials';
import { Icon } from 'components/Icon';
import { Toaster } from 'react-hot-toast';
import { FaSpotify } from 'react-icons/fa';

import profilePic from 'public/profile.webp';

export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());

export default function Main() {
  var { data: spotify } = useSWR('/api/spotify', fetcher, {
    refreshInterval: 3000,
    fallbackData: 'loading',
  });

  return (
    <FadeIn>
      <div className='px-8 2xl:translate-y-2/3 translate-y-1/3 m-auto max-w-4xl'>
        <div className='flex flex-col justify-center items-center'>
          <Image
            src={profilePic}
            alt='Profile Picture'
            placeholder='blur'
            className='rounded-full text-center'
            height={150}
            width={150}
          />

          <h1 className='text-4xl font-bold mt-1'>
            albert
            <span className='align-text-top text-xs'>
              {Math.floor(
                (new Date().getTime() - new Date('2004-07-22').getTime()) /
                  (1000 * 60 * 60 * 24 * 365.25)
              )}
            </span>
          </h1>

          <p className='text-[#9ca3af] text-xl flex flex-wrap items-center justify-center whitespace-pre-wrap'>
            Systems Administrator
          </p>
        </div>

        <hr className='border-t-[#727277] w-4/5 md:w-2/5 m-auto mt-5 md:mt-8' />

        <div className='mt-3 flex justify-center items-center'>
          <FaSpotify className='text-[#32a866]' />
          <p className='font-semibold pl-1'>
            Listening to{' '}
            {spotify.song ? (
              <Link
                href={`${spotify.song.url}`}
                target='_blank'
                className='text-[#32a866]'
              >
                {' '}
                {spotify.song.title}
              </Link>
            ) : (
              <span className='text-[#32a866]'>nothing</span>
            )}
          </p>
        </div>

        <div className='flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto'>
          {socials.map((social) => (
            <Icon
              key={social.id}
              reference={social.ref}
              copyValue={social.copyValue}
            >
              {React.createElement(social.icon)}
            </Icon>
          ))}
        </div>
      </div>

      <Toaster />
    </FadeIn>
  );
}