'use client'

import React from 'react';
import Button from '@mui/material/Button';
import { SxProps } from '@mui/material';

interface IButtonEnotBulding {
  children: React.ReactNode;
  sx?: SxProps;
  onClick?: () => void;
  isDisabled?: boolean;
}

const ButtonEnotBulding: React.FC<IButtonEnotBulding> = ({ children, sx = {}, onClick }) => {
  return (
    <Button
      disableRipple
      onClick={onClick}
      sx={{
        width: 'auto',
        borderRadius: '40px',
        backgroundImage: 'linear-gradient(to bottom, #C38F87, #AC7F78)',
        p:'8px 16px',
        color: 'white',
        boxShadow: 'inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.3)',
        '&:active': {
          transition: 'opacity 0.2s ease',
          boxShadow: 'inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.3)',
          opacity: 0.7,
        },
        '&:hover': {
          backgroundImage: 'linear-gradient(to bottom, #C38F87, #AC7F78)',
        },


        ...sx,
      }}
    >
      {children}
    </Button>
  );
};

export default ButtonEnotBulding;