"use client";

import { useTranslations } from "next-intl";
import SectionBadge from "@/components/shared/SectionBadge/Index";
import { Button } from "@/components/ui/button";
import { FaRegPlayCircle } from "react-icons/fa";
import ButtonWithIcon from "@/components/shared/ButtonWithIcon/Index";

export default function HeroContent() {
  const t = useTranslations("heroSection");
  return (
    <div className="py-5 md:py-10 lg:py-[120px] px-5 md:px-10 lg:px-20 flex flex-col">
      <SectionBadge text={t("badge")} />
      <div className="lg:max-w-[50%] w-full">
        <h1 className="text-[24px] md:text-[40px] font-bold text-white">
          {t("title")}
        </h1>
        <h3
          className="text-[24px] md:text-[40px] font-bold bg-clip-text text-transparent"
          style={{
            backgroundImage: "var(--color-gradient-text)",
          }}
        >
          {t("subtitle")}
        </h3>
        <p className="py-5 md:py-10 text-white text-[12px] md:text-[16px]">
          {t("description")}
        </p>
        <div className="flex gap-5">
          <ButtonWithIcon>{t("getStarted")}</ButtonWithIcon>
          <Button
            variant="outline"
            className="flex items-center justify-center gap-2 bg-transparent border-none text-white hover:bg-white/10"
          >
            <span>{t("learnMore")}</span>
            <FaRegPlayCircle className="size-5" />
          </Button>
        </div>
      </div>
    </div>
  );
}