import clsx from "clsx";
import { Fragment } from "react";
import { HeroBlockDto } from "./HeroBlockUtils";
import { useApp } from "../../../../../../hooks";
import Link from "next/link";

export  function HeroVariantSimple({ item }: { item: HeroBlockDto }) {
  return (
    <section>
      <div className="mx-auto flex max-w-screen-xl px-4 py-16 lg:items-center">
        <div className="mx-auto max-w-7xl text-center md:max-w-6xl">
          <div className="mb-4">
            {item.topText && (
              <span className="block text-sm font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-600 sm:text-base lg:text-sm xl:text-base">
                {item.topText.text ?? ""}{" "}
                {item.topText.link && (
                  <Link href={item.topText.link.href ?? ""} className="relative font-semibold text-theme-600">
                    <span className="absolute inset-0" aria-hidden="true" />
                    {item.topText.link.text ?? ""} <span aria-hidden="true">&rarr;</span>
                  </Link>
                )}
              </span>
            )}
          </div>
          {item.headline && (
            <h1 className="title-font mb-4 max-w-4xl text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl md:text-5xl md:font-extrabold">
              {item.headline}
            </h1>
          )}
          {item.description && <p className="mb-8 max-w-4xl leading-relaxed text-gray-600 dark:text-gray-400">{item.description}</p>}

          <div className="mt-8 flex flex-wrap justify-center gap-4">
            {item.cta.map((item, idx) => {
              return (
                <Fragment key={idx}>
                  {item.href.startsWith("http") ? (
                    <a
                      key={idx}
                      href={item.href}
                      target={item.target}
                      className={clsx(
                        "w-full sm:w-auto",
                        item.isPrimary
                          ? "inline-flex justify-center rounded-md border-0 bg-theme-500 py-3 px-4 text-lg text-white shadow-sm hover:bg-theme-600 focus:outline-none"
                          : "inline-flex justify-center rounded-md border-0 bg-gray-100 py-3 px-4 text-lg text-gray-700 shadow-sm hover:bg-gray-200 focus:outline-none"
                      )}
                    >
                      {item.text}
                    </a>
                  ) : (
                    <Link
                      key={idx}
                      href={item.href}
                      className={clsx(
                        "w-full sm:w-auto",
                        item.isPrimary
                          ? "inline-flex justify-center rounded-md border-0 bg-theme-500 py-3 px-4 text-lg text-white shadow-sm hover:bg-theme-600 focus:outline-none"
                          : "inline-flex justify-center rounded-md border-0 bg-gray-100 py-3 px-4 text-lg text-gray-700 shadow-sm hover:bg-gray-200 focus:outline-none"
                      )}
                    >
                      {item.text}
                    </Link>
                  )}
                </Fragment>
              );
            })}
          </div>

          <div className="mt-8 space-y-3">
            {item.bottomText && (
              <span>
                {item.bottomText.text ?? ""}{" "}
                {item.bottomText.link?.href && (
                  <>
                    {item.bottomText.link.href.startsWith("http") ? (
                      <a
                        href={item.bottomText.link.href ?? ""}
                        target={item.bottomText.link.target}
                        className="border-b border-dashed border-accent-500 text-sm italic text-gray-500 hover:border-dotted dark:border-cyan-300"
                      >
                        {item.bottomText.link.text ?? ""}
                      </a>
                    ) : (
                      <Link
                        href={item.bottomText.link.href ?? ""}
                        className="border-b border-dashed border-accent-500 text-sm italic text-gray-500 hover:border-dotted dark:border-cyan-300"
                      >
                        {item.bottomText.link.text ?? ""}
                      </Link>
                    )}
                  </>
                )}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}