import Image from 'next/image';
import { TimelineProps } from '../../types/types';
import { ArrowDown, Circle } from 'lucide-react';
import { LucideStaticIcon } from '../../components/icon-picker';
import { ImageQuality } from '@/config/enums/image-quality';

export default function TimelineWidget({ props }: { props: TimelineProps }) {
  if (!props || !props?.timeline.length) {
    return null;
  }
  const { title, description, timeline } = props;

  return (
    <div className='border-t-client-blue timeline my-7 grid border-t bg-neutral-100 p-3'>
      {(title || description) && (
        <div className='mb-8 p-2'>
          {title && <h5 className='font-sans text-3xl font-bold'>{title}</h5>}
          {description && <p className='!font-sans text-lg'>{description}</p>}
        </div>
      )}
      <div className='flex'>
        <span
          className='before:bg-client-blue relative flex shrink-0 flex-col items-center justify-between before:absolute before:inset-0 before:top-1 before:m-auto before:h-[calc(100%-76px)] before:w-2 sm:px-2'
          aria-hidden
        >
          <Circle className='stroke-client-blue size-12 stroke-4' />
          <ArrowDown className='stroke-client-blue size-12 stroke-4' />
        </span>
        <div className='relative flex grow flex-col gap-6 py-10'>
          {timeline.map((item) => (
            <div key={item.id} className='p-3 sm:pr-6'>
              <div className='mb-4 flex justify-between'>
                <div className='before:bg-client-blue relative before:absolute before:top-4 before:-left-10 before:h-1 before:w-7'>
                  <LucideStaticIcon
                    node={item.icon?.node}
                    className='stroke-client-blue mb-2 size-10 stroke-3'
                  />
                  <h5 className='font-sans text-3xl font-bold'>{item.title}</h5>
                </div>
              </div>

              {!!item.media?.length && (
                <Image
                  src={item.media[0].url}
                  alt={item.media[0].alt || 'Artikle image'}
                  width={1000}
                  height={600}
                  className='mb-4 w-full object-cover'
                  quality={ImageQuality.MEDIUM}
                />
              )}

              <p className='text-client-dark font-serif text-lg whitespace-pre-line'>
                {item.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}