import Link from "next/link";

interface Props {
  message?: string;
}

export function OrdersEmptyState({
  message = "When you place an order, it will appear here.",
}: Props) {
  return (
    <div className="flex flex-col items-center justify-center py-20 text-center">
      <div className="mb-4 text-5xl" aria-hidden="true">
        🛍️
      </div>
      <h2 className="font-[family-name:var(--font-fraunces)] text-xl font-semibold text-[#1a2e2d]">
        No orders yet
      </h2>
      <p className="mt-2 max-w-xs text-sm text-gray-500">{message}</p>
      <Link
        href="/shop"
        className="mt-6 inline-flex items-center rounded-md bg-[#f4a13a] px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#db8d2e]"
      >
        Start Shopping
      </Link>
    </div>
  );
}
