import { twMerge } from 'tailwind-merge'

import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import type { TNews } from '~/types/news'

import { Button } from './button'

export const Carousel = (properties: TNews) => {
  const { title, description, items, type } = properties
  return (
    <div>
      <div className="mb-[30px] flex items-center justify-between border-b border-black pb-[30px]">
        <div className="grid">
          <h2 className="text-4xl font-extrabold text-[#2E2F7C]">{title}</h2>
          <p className="text-2xl font-light text-[#777777] italic">
            {description}
          </p>
        </div>
        <div className="flex gap-2.5">
          <CarouselPreviousIcon
            color="#DCDCDC"
            className="cursor-pointer"
          />
          <CarouselNextIcon
            color="#2E2F7C"
            className="cursor-pointer"
          />
        </div>
      </div>
      <div
        className={twMerge(
          'grid gap-x-8',
          type === 'hero' ? 'grid-cols-1' : 'grid-cols-3',
        )}
      >
        {items.map(({ image, title, content }, index) => (
          <div
            key={index}
            className={twMerge(
              'grid gap-x-8',
              type === 'hero' ? 'grid-cols-3' : '',
            )}
          >
            <img
              className={twMerge(
                'w-full object-cover',
                type === 'hero'
                  ? 'col-span-2 aspect-[174/100]'
                  : 'aspect-[5/4]',
              )}
              src={image}
              alt={title}
            />
            <div
              className={twMerge(
                'flex flex-col justify-between',
                type === 'hero' ? 'gap-7' : 'gap-4',
              )}
            >
              <div>
                <h3
                  className={twMerge(
                    'font-bold',
                    type === 'hero' ? 'text-4xl' : 'text-2xl',
                  )}
                >
                  {title}
                </h3>
                <p className="text-xl">{content}</p>
              </div>
              <Button size="block">View More</Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}