import { FC } from "react";
import { motion } from "motion/react";
import { Link } from "react-router-dom";
import { Button } from "../ui/button";
import { cn } from "@/lib/utils";
import { useLangStore } from "@/store/lang";

interface Props {
  className?: string;
  delay?: number;
}

export const FormSuccesStatus: FC<Props> = ({ className, delay = 0.15 }) => {
  const lang = useLangStore((state) => state.lang);

  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0, transition: { delay: delay } }}
      className={cn("flex flex-col gap-8 my-16", className)}
    >
      <h3 className="text-3xl text-center">
        {{ ru: "Форма успешно отправлена!", en: "Form submitted successfully!", tm: "Forma üstünlikli ugradyldy!" }[lang]}
      </h3>

      <Link className="w-fit mx-auto" to="/">
        <Button variant={"outline"}>
          {{ ru: "Вернуться на главную", en: "Back to home", tm: "Baş sahypa gaýdyp barmak" }[lang]}
        </Button>
      </Link>
    </motion.div>
  );
};