import React from 'react';
import styled from "styled-components";
import {gradient, lightGreenColor, whiteColor} from "@/styles/colors";

interface ButtonProps {
    label: string,
    padding: string,
    fontSize: string,
    onClick?: () => void,
    disabled?: boolean
}

interface StyledProps {
    $padding: string,
    $fontSize: string,
}

const StyleButton = styled.button<StyledProps>`
    background: ${gradient};
    padding: ${props => props.$padding};
    font-size: ${props => props.$fontSize};
    color: ${whiteColor};
    text-transform: uppercase;
    border-radius: 16px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: ${lightGreenColor};
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        transition: all 0.4s ease;
        border-radius: 10%;
        filter: blur(20px);
        z-index: -1;
        will-change: transform, opacity;
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
    &:hover::before {
        transform: translate(-50%, -50%) scale(1);
        opacity: .6;
    }
`

const StyledButton = ({label, padding, fontSize, onClick, disabled}: ButtonProps) => {
    return (
        <StyleButton disabled={disabled} $padding={padding} $fontSize={fontSize} onClick={onClick}>
            {label}
        </StyleButton>
    );
};

export default StyledButton;