"use client";

import Link from "next/link";

function HeartIcon() {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
    </svg>
  );
}

export function WishlistEmptyState() {
  return (
    <section
      aria-labelledby="wishlist-empty-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]">
        <HeartIcon />
      </div>
      <div className="flex flex-col gap-1">
        <h2
          id="wishlist-empty-heading"
          className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-[#1a2e2d]"
        >
          Your wishlist is empty
        </h2>
        <p className="max-w-xs text-sm text-gray-500">
          Save items you love and they&apos;ll appear here.
        </p>
      </div>
      <Link
        href="/shop"
        className="mt-2 inline-flex items-center rounded-md bg-[#f4a13a] px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#e0922e]"
      >
        Browse Products
      </Link>
    </section>
  );
}
