import { Heart } from "lucide-react";
import { Link } from "react-router-dom";
import { useI18n } from "../../i18n";
import { Reveal } from "../../motion";

export default function Favorites() {
  const { t } = useI18n();

  return (
    <Reveal className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 py-12 text-center">
      <div className="flex h-20 w-20 items-center justify-center rounded-full border border-ark-gold/30 bg-ark-gold/5">
        <Heart
          className="h-10 w-10 text-ark-gold/70"
          strokeWidth={1.8}
          aria-hidden
        />
      </div>

      <h1 className="text-2xl font-semibold text-neutral-100 md:text-3xl">
        {t("favorites")}
      </h1>

      <p className="text-base font-medium text-ark-gold2 md:text-lg">
        {t("favoritesComingSoon")}
      </p>

      <p className="max-w-md text-sm leading-relaxed text-neutral-400 md:text-base">
        {t("favoritesComingSoonDesc")}
      </p>

      <Link
        to="/"
        className="mt-4 inline-flex h-11 items-center justify-center rounded-full border border-ark-gold/60 bg-ark-gold/10 px-6 text-sm font-medium text-ark-gold transition hover:bg-ark-gold/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
      >
        {t("backToHome")}
      </Link>
    </Reveal>
  );
}