import React from 'react';

const ButtonText = ({ text = 'Découvrir' }) => {
  const buttonStyle = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '12px 20px',
    borderRadius: '200px',
    border: '1px solid #c7c9ce',
    backgroundColor: 'inherit',
    minWidth: '133px',
    height: '48px',
    cursor: 'pointer',
    transition: 'all 0.2s ease-in-out',
    boxSizing: 'border-box'
  };

  const textStyle = {
    color: '#4b5162',
    fontFamily: 'DM Sans',
    fontSize: '16px',
    fontWeight: 700,
    lineHeight: '122%',
    textAlign: 'center'
  };

  const handleHover = (e) => {
    e.currentTarget.style.backgroundColor = '#f5f5f5';
  };

  const handleLeave = (e) => {
    e.currentTarget.style.backgroundColor = 'inherit';
  };

  return (
    <button className='ButtonText_buttonStyle'

      onMouseEnter={handleHover}
      onMouseLeave={handleLeave}
    >
      <span className='ButtonText_textStyle'>{text}</span>
    </button>
  );
};

export default ButtonText;

