import React from "react";
import { LinkPreview } from "../ui/link-preview";
import { getTranslations } from "next-intl/server";
import { cn } from "@/lib/utils";

export default async function Hero() {
  const t = await getTranslations();
  const items = [
    {
      label: t("home.hero.slot1.label"),
      link: t("home.hero.slot1.link"),
      image: t("home.hero.slot1.image"),
    },
    {
      label: t("home.hero.slot2.label"),
      link: t("home.hero.slot2.link"),
      image: t("home.hero.slot2.image"),
    },
    {
      label: t("home.hero.slot3.label"),
      link: t("home.hero.slot3.link"),
      image: t("home.hero.slot3.image"),
    },
  ];
  return (
    <div className="text-5xl uppercase sm:text-6xl md:text-7xl lg:text-8xl lg:max-w-2xl flex flex-col w-full sm:max-w-sm max-w-xs md:max-w-lg  mx-auto font-black p-4 lg:p-0 ">
      <span className="hover:scale-105 transition-transform duration-150 ease-in-out cursor-default w-max">
        {items[0].label}
      </span>
      <span className="hover:scale-105 transition-transform duration-150 ease-in-out cursor-default w-max ml-auto">
        {items[1].label}
      </span>

      <span className="hover:scale-105 text-primary transition-transform duration-150 ease-in-out cursor-default w-max">
        {items[2].label}
      </span>
      {/* <LinkPreview
        newTab={true}
        url={items[2].link}
        imageSrc={items[2].image}
        className={cn(" text-primary")}
        classNames={{
          imageWrapper: cn("rounded-full bg-primary border-primary"),
          image: "rounded-full",
        }}
        side="bottom"
        isStatic
      >
        {items[2].label}
      </LinkPreview> */}
    </div>
  );
}

// export default Hero;
