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 text-[#777777]">{content}</p>
                </div>
                <Button size="block">View More</Button>
              </div>
            </div>
          ))}
        </div>
      </div> */}

      <div className="">
        <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
          <div className="grid">
            <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
              {title}
            </h2>
            <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
              {description}
            </p>
          </div>

          <div className="flex gap-2.5">
            <CarouselPreviousIcon
              color="#DCDCDC"
              className="cursor-pointer"
              width={45}
              height={45}
            />
            <CarouselNextIcon
              color="#2E2F7C"
              className="cursor-pointer"
              width={45}
              height={45}
            />
          </div>
        </div>
        <div
          className={twMerge(
            'grid sm:grid sm:gap-x-8',
            type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
          )}
        >
          {items.map(({ image, title, content, tag }, index) => (
            <div
              key={index}
              className={twMerge(
                'grid sm:gap-x-8',
                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
              )}
            >
              <img
                className={twMerge(
                  'w-full object-cover',
                  type === 'hero'
                    ? 'col-span-2 aspect-[174/100]'
                    : 'aspect-[5/4] rounded-md',
                )}
                src={image}
                alt={title}
              />
              <div
                className={twMerge(
                  'flex flex-col justify-between',
                  type === 'hero' ? 'gap-7' : 'gap-4',
                )}
              >
                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
                  {tag?.map((item) => (
                    <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
                      {item}
                    </span>
                  ))}
                </div>

                <div>
                  <h3
                    className={twMerge(
                      'mt-2 w-full font-bold lg:mt-0',
                      type === 'hero'
                        ? 'text-2xl sm:text-4xl'
                        : 'text-xl sm:text-2xl',
                    )}
                  >
                    {title}
                  </h3>
                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
                    {content}
                  </p>
                </div>
                <Button size="block">View More</Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  )
}
