import React from 'react';

const ButtonSection = ({ style }) => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '20px',
      width: '100%',
      maxWidth: '287px',
      ...style
    }}>
      <button 
        style={{
          width: '100%',
          height: '48px',
          padding: '12px 20px',
          borderRadius: '200px',
          border: '1px solid #c7c9ce',
          background: 'transparent',
          cursor: 'pointer',
          transition: 'all 0.2s ease-in-out',
          textAlign: 'center'
        }}
        onMouseOver={(e) => {
          e.target.style.background = '#f5f5f5';
        }}
        onMouseOut={(e) => {
          e.target.style.background = 'transparent';
        }}
      >
        <div style={{
          padding: '0 8px'
        }}>
          <span style={{
            fontFamily: 'DM Sans',
            fontSize: '16px',
            fontWeight: 700,
            lineHeight: '122%',
            color: '#4b5162'
          }}>
            Découvrir nos fonctionnalités
          </span>
        </div>
      </button>

      <a 
        href="#"
        style={{
          display: 'inline-block',
          padding: '0 0 6px 0',
          border: 'none',
          borderBottom: '1px solid #4b5162',
          color: '#4b5162',
          textDecoration: 'none',
          cursor: 'pointer',
          alignSelf: 'center',
          transition: 'all 0.2s ease-in-out'
        }}
        onMouseOver={(e) => {
          e.target.style.color = '#2d3142';
          e.target.style.borderBottom = '1px solid #2d3142';
        }}
        onMouseOut={(e) => {
          e.target.style.color = '#4b5162';
          e.target.style.borderBottom = '1px solid #4b5162';
        }}
      >
        <span style={{
          fontFamily: 'DM Sans',
          fontSize: '14px',
          fontWeight: 700,
          lineHeight: '126%'
        }}>
          Créer un compte
        </span>
      </a>
    </div>
  );
};

ButtonSection.defaultProps = {
  style: {}
};

export default ButtonSection;

