import { Link, useLocation } from 'react-router'
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 location = useLocation()
  const hasCategory = location.pathname.includes('/category/')

  const { title, description, items, type } = properties
  return (
    <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>
        {!hasCategory && (
          <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(({ featured, title, content, tags, slug }, 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={featured}
              alt={title}
            />
            <div
              className={twMerge(
                'flex flex-col justify-between',
                type === 'hero' ? 'gap-7' : 'gap-4',
              )}
            >
              <div className={`${type === 'hero' ? 'hidden' : ''} `}>
                {tags?.map((item, index) => (
                  <span
                    key={index}
                    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"
                as={Link}
                to={`detail/${slug}`}
                className={twMerge('', type === 'hero' ? '' : 'mb-5')}
              >
                View More
              </Button>
            </div>
          </div>
        ))}
      </div>
      {hasCategory && (
        <div className="my-5 mt-5 flex flex-row-reverse">
          <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>
  )
}