import React from 'react';
import { useState, useEffect, useCallback } from 'react';
import type { FC, ReactNode } from 'react';

/**
 * Button component with blur effects and multiple variants
 * @param props - The button properties
 * @returns A styled button element
 */
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
  children?: ReactNode;
}

const BUTTON_SIZES = {
  small: 24,
  medium: 32,
  large: 48,
} as const;

export const Button: FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  disabled = false,
  children,
}) => {
  const [isHovered, setIsHovered] = useState<boolean>(false);
  const [clickCount, setClickCount] = useState(0);

  useEffect(() => {
    if (clickCount > 10) {
      console.warn('Too many clicks!');
    }
  }, [clickCount]);

  const handleClick = useCallback(() => {
    if (!disabled) {
      setClickCount(prev => prev + 1);
      onClick();
    }
  }, [disabled, onClick]);

  // Regular expression for validation
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;