"use client";

import Image from "next/image";
import Button from "@/components/ui/button";
import NavigationButton from "@/components/ui/navigation-button";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { localizePath } from "@/i18n/config";
import { useI18n } from "@/i18n/provider";

export default function Intro() {
  const { dictionary: t, locale } = useI18n();
  const { data: profile } = useMarriageProfileQuery();
  const submitPath =
    profile?.status === "pending_onboarding"
      ? "/rules"
      : profile?.status === "pending_info"
        ? "/questions-list"
        : profile?.status === "waiting"
          ? "/finding-match"
          : "/slider";
  const submitHref = localizePath(submitPath, locale);

  return (
    <div className="pt-7">
      <header className="flex items-center justify-between">
        <NavigationButton icon="back" />
        <h1 className="font-faminela">{t.common.appName}</h1>
        <NavigationButton icon="support" iconLabel={t.common.support} />
      </header>
      <main>
        <div className="flex flex-col items-center mt-16">
          <Image
            src={"/assets/images/Group 1597880466.svg"}
            alt={t.intro.imageAlt}
            width={168}
            height={155}
          />
          <h2 className="text-[#475569] font-bold mt-5 text-center">
            {t.intro.title}
          </h2>
          <p className=" text-center mt-2 text-xs text-[#4D4D4D]">
            {t.intro.description}
          </p>
        </div>
        <div className="flex items-center justify-between mt-4">
          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
            <Image
              src={"/assets/images/tabler_user-filled.svg"}
              alt="User"
              width={37}
              height={37}
            />
            <div className="flex flex-col items-start justify-start -mb-2">
              <p className="text-[#36363C] text-lg font-bold leading-3">120</p>
              <p className="text-[#36363C] text-[10px] font-semibold">
                {t.intro.userProfile}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
            <Image
              src={"/assets/images/icon-park-solid_success.svg"}
              alt="User"
              width={37}
              height={37}
            />
            <div className="flex flex-col items-start justify-start -mb-2">
              <p className="text-[#36363C] text-lg font-bold leading-3">14</p>
              <p className="text-[#36363C] text-[10px] font-semibold">
                {t.intro.matches}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
            <Image
              src={"/assets/images/typcn_heart-full-outline.svg"}
              alt="User"
              width={37}
              height={37}
            />
            <div className="flex flex-col items-start justify-start -mb-2">
              <p className="text-[#36363C] text-lg font-bold leading-3">14</p>
              <p className="text-[#36363C] text-[10px] font-semibold">
                {t.intro.marriage}
              </p>
            </div>
          </div>
        </div>
        <div className="mt-14 relative">
          <Image
            src={"/assets/images/Frame 2095586523.png"}
            alt={t.intro.videoAlt}
            width={344}
            height={221}
          />
          <Image
            src={"/assets/images/Frame 1116607280.svg"}
            alt={t.intro.playAlt}
            width={68}
            height={68}
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
          />
        </div>
        <div className="mt-7 pb-5">
          <Button href={submitHref}>{t.common.submit}</Button>
        </div>
      </main>
    </div>
  );
}