import React from 'react';

interface ButtonProps {
  onClick?: () => void;
  children: React.ReactNode;
  className?: string;
  variant?: 'primary' | 'secondary' | 'outline';
}

const Button: React.FC<ButtonProps> = ({ onClick, children, className = '', variant = 'primary' }) => {
  const baseStyles = 'px-4 py-2 rounded focus:outline-none transition duration-300';
  const variantStyles = {
    primary: 'bg-turquoise text-white hover:bg-turquoise-dark',
    secondary: 'bg-white text-dark-anthracite border border-dark-anthracite hover:bg-gray-100',
    outline: 'bg-transparent text-dark-anthracite border border-dark-anthracite hover:bg-gray-100',
  };

  return (
    <button
      onClick={onClick}
      className={`${baseStyles} ${variantStyles[variant]} ${className}`}
    >
      {children}
    </button>
  );
};

export default Button;