"use client";

import Link from "next/link";

function LockIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
    </svg>
  );
}

export function WishlistSignInPrompt() {
  return (
    <section
      aria-labelledby="wishlist-signin-heading"
      className="flex flex-col items-center justify-center gap-5 py-20 text-center"
    >
      <div className="flex size-20 items-center justify-center rounded-full bg-[#e8f7f6] text-[#38a99f]">
        <LockIcon />
      </div>
      <div className="flex flex-col gap-1">
        <h2
          id="wishlist-signin-heading"
          className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-[#1a2e2d]"
        >
          Sign in to view your wishlist
        </h2>
        <p className="max-w-xs text-sm text-gray-500">
          Save your favorite items by signing in.
        </p>
      </div>
      <Link
        href="/sign-in"
        className="mt-2 inline-flex items-center rounded-md bg-[#236f6b] px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#1b5955]"
      >
        Sign In
      </Link>
    </section>
  );
}
