'use client';

import Link from 'next/link';
import Button from '@/components/base/Button';
import Icon from '@/components/base/Icon/Icon';
import Container from '@/components/layout/Container';
import ResponsiveImage from '@/components/shared/ResponsiveImage';
import Counter from './Counter';
import scrollTheFold from '@/lib/scrollTheFold';
import cn from '@/lib/merge-clsx';
import RenderMarkdown from '@/components/shared/RenderMarkdown';
import { spec } from 'node:test/reporters';

const Banner: React.FC<IBanner> = ({
  title,
  description,
  button,
  image,
  specifications,
  labels
}) => {
  return (
    <section className="dark py-10 bg-default-50 text-foreground">
      <Container>
        <div className="relative mb-4 md:mb-8">
          <div className="relative z-10">
            <h1
              className={cn(
                'font-sans',
                '[-webkit-text-stroke:0.8px]',
                '[-webkit-text-fill-color:transparent]',
                'text-5xl sm:text-7xl md:text-8xl xl:text-[10rem]',
                'text-center uppercase',
                '-mb-3 sm:-mb-4 md:-mb-7 xl:-mb-10'
              )}>
              {title}
            </h1>
          </div>

          <div className="relative overflow-hidden mb-8 lg:px-16">
            <div>
              <ResponsiveImage
                src={image.url}
                width={image.width}
                height={image.height}
                className="mx-auto overflow-hidden object-cover rounded-xl min-h-40"
                sizes="100vw"
                alt={image.alternativeText}
                priority
              />
            </div>
          </div>

          {labels?.scrollDown && (
            <div className="hidden absolute z-10 bottom-16 md:bottom-8 -end-4 lg:flex lg:flex-col lg:justify-start">
              <div
                className={cn(
                  'relative h-24 w-[1px] before:absolute before:inset-0',
                  'before:bg-[linear-gradient(100deg,#CC93D3_0%,#793BE0_100%)] ms-1.5'
                )}></div>
              <button
                onClick={scrollTheFold}
                className="text-start cursor-pointer mt-2 transition-opacity opacity-50 hover:opacity-90">
                <Icon name="scroll" className="text-xl" />
                <span className="font-light uppercase text-sm text-start block max-w-min break-words">
                  {labels.scrollDown}
                </span>
              </button>
            </div>
          )}
        </div>

        <div className="lg:px-[12%]">
          <div className="relative">
            <RenderMarkdown
              components={{
                p: ({ children }) => (
                  <p className="text-white opacity-80 font-sans font-light mb-8 leading-6 tracking-wider md:text-lg xl:text-xl">
                    {children}
                  </p>
                )
              }}>
              {description}
            </RenderMarkdown>

            {button && (
              <div className="flex justify-center sm:mt-8 mb-16">
                <Button
                  as={Link}
                  href={button.url}
                  color="primary"
                  size="lg"
                  className="text-sm">
                  {button.label}
                </Button>
              </div>
            )}
          </div>

          <div className="relative">
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8 lg:gap-10 text-foreground">
              {specifications.map(({ label, value, image }) => {
                return (
                  <Counter
                    key={label}
                    label={label}
                    icon={image}
                    count={value}
                  />
                );
              })}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

export default Banner;
