/* ButtonColorful — vanilla JSX port of kokonutd/button-colorful */
function ButtonColorful({ label = 'Explore Components', className = '', onClick, href }) {
  const Tag = href ? 'a' : 'button';
  const props = href ? { href } : { onClick };
  return (
    <Tag
      {...props}
      className={[
        'relative inline-flex items-center justify-center',
        'h-11 px-5 rounded-md overflow-hidden',
        'bg-zinc-900',
        'transition-all duration-200',
        'group cursor-pointer select-none',
        'font-mono text-[12px] tracking-[0.18em] uppercase',
        className,
      ].join(' ')}
      style={{ fontVariationSettings: '"MONO" 1, "CASL" 0' }}
    >
      {/* Gradient halo (matches the 21st.dev component) */}
      <span
        aria-hidden="true"
        className="absolute inset-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-40 group-hover:opacity-80 blur transition-opacity duration-500"
      ></span>

      {/* Content */}
      <span className="relative flex items-center justify-center gap-2">
        <span className="text-white">{label}</span>
        <svg
          width="14" height="14" viewBox="0 0 24 24"
          fill="none" stroke="currentColor"
          strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round"
          className="text-white/90"
          aria-hidden="true"
        >
          <line x1="7" y1="17" x2="17" y2="7"></line>
          <polyline points="7 7 17 7 17 17"></polyline>
        </svg>
      </span>
    </Tag>
  );
}

window.ButtonColorful = ButtonColorful;