import { CheckCircle2 } from "lucide-react";
import Link from "next/link";

import { MotionFade } from "@/components/motion-fade";
import { resolveLocale } from "@/lib/site-data";

type SuccessPageProps = {
  params: {
    locale: string;
  };
};

export default function SuccessPage({ params: { locale } }: SuccessPageProps) {
  const localeKey = resolveLocale(locale);

  const copy =
    localeKey === "de"
      ? {
          title: "Danke fuer deine Nachricht",
          text: "Wir haben deine Anfrage erhalten und melden uns zeitnah.",
          home: "Zur Startseite",
          contact: "Zur Kontaktseite",
        }
      : {
          title: "Thank you for your message",
          text: "We received your request and will reply shortly.",
          home: "Go to homepage",
          contact: "Back to contact",
        };

  return (
    <div className="mx-auto flex w-full max-w-4xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
      <MotionFade className="w-full">
        <section className="w-full rounded-3xl border border-default bg-surface p-8 text-center  ">
          <CheckCircle2 className="mx-auto h-12 w-12 text-emerald-500" />
          <h1 className="mt-4 text-3xl font-semibold text-fg sm:text-4xl">
            {copy.title}
          </h1>
          <p className="mx-auto mt-3 max-w-2xl text-base text-muted">
            {copy.text}
          </p>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
            <Link
              href={`/${localeKey}`}
              className="inline-flex rounded-lg bg-inverse px-4 py-2.5 text-sm font-medium text-inverse transition hover:opacity-90  "
            >
              {copy.home}
            </Link>
            <Link
              href={`/${localeKey}/contact`}
              className="inline-flex rounded-lg border border-strong px-4 py-2.5 text-sm font-medium text-muted-strong transition hover-surface-soft  text-muted-strong"
            >
              {copy.contact}
            </Link>
          </div>
        </section>
      </MotionFade>
    </div>
  );
}