import Link from "next/link";

const textureStyle = {
  backgroundImage: "url(/gallery/menu-button-texture.png)",
  backgroundSize: "220px 220px",
  backgroundRepeat: "repeat" as const,
  backgroundPosition: "center",
};

type Props = {
  href: string;
  children: React.ReactNode;
  className?: string;
};

export function MenuTextureButton({ href, children, className = "" }: Props) {
  return (
    <Link
      href={href}
      className={`inline-flex items-center justify-center rounded-[5px] border border-white/25 px-4 py-5 text-base font-semibold text-white shadow-lg shadow-chocolat/40 transition hover:brightness-110 ${className}`}
      style={textureStyle}
    >
      <span className="[paint-order:stroke_fill] [-webkit-text-stroke:1.25px_#000]">
        {children}
      </span>
    </Link>
  );
}
