import React, { useEffect, useState } from "react";
import { Style } from "util";
import './pinkButton.css';

type TProps = {
    textButton: string
    onClick?: () => void
    type?: 'submit' | 'button'
    width?: '100%' | string,
    variant?: 'gray' | 'default'
}

export const PinkButton:React.FC<TProps> = React.memo((props) => {
    const [styles, setStyles] = useState<React.CSSProperties>();
    useEffect(() => {
        setStyles({
            // backgroundColor: '#CE56C2'
        })
    }, [])
    return <button        
        style={{width: props.width ? props.width : '', ...styles}}
        className={`main-part-text-button ${props.variant === "gray" ? 'gray' : ''}`}
        onClick={() => {
            return props?.onClick ? props.onClick() : null;
        }}
        type={props.type ? props.type : 'button'}
        >
            {props.textButton}
        </button>
})