"use client";
import { useId, type ButtonHTMLAttributes } from "react";
// npm install @phosphor-icons/react
import { ChampagneIcon } from "@phosphor-icons/react/dist/csr/Champagne";
import "./gradient-button.css";
export function GradientButton({
children = "Order now",
className = "",
type = "button",
...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
const filterId = useId();
return (
<button type={type} className={`static-gradient ${className}`} {...props}>
<svg className="static-gradient__grain" aria-hidden="true" focusable="false">
<defs>
<filter id={filterId} colorInterpolationFilters="sRGB" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves={3} seed={7} stitchTiles="stitch" />
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<rect width="100%" height="100%" filter={`url(#${filterId})`} />
</svg>
<span className="gradient-label">{children}</span>
<ChampagneIcon className="gradient-icon" size={20} weight="regular" aria-hidden="true" focusable="false" />
</button>
);
}