import { Button } from '@mui/material';
import { styled } from '@mui/material';

export const PrimaryButton = styled(Button)(({ width, height }) => ({
  border: '1px solid #6fb246',
  borderRadius: '0.5rem',
  padding: '0.38rem 0.75rem',
  width: width || 'max-content',
  height: height || '2rem',
  background: 'linear-gradient(174deg, #7abc51 0%, #46881c 100%)',
  color: 'white',

  '&:hover': {
    background: 'linear-gradient(174deg, #60a635 0%, #30660f 100%)',
  },
  '&:active': {
    boxShadow: '0 4px 15px 0 rgba(50, 104, 17, 0.4)',
    background: 'linear-gradient(172deg, #7abc51 0%, #46881c 100%)',
  },

  '&.Mui-disabled': {
    background: 'linear-gradient(174deg, #c4c4c4 0%, #8c8c8c 100%)',
    border: '1px solid #bfbfbf',
    pointerEvents: 'none',
  },
}));

export const SecondaryButton = styled(Button)(({ width, height }) => ({
  borderRadius: '0.5rem',
  padding: '0.38rem 0.75rem',
  width: width || 'max-content',
  height: height || '2rem',
  background: '#f3f3f5',
  color: '#4a5565',

  '&:hover': {
    background: '#e7e7ea',
  },

  '&.Mui-disabled': {
    background: 'linear-gradient(174deg, #c4c4c4 0%, #8c8c8c 100%)',
    border: '1px solid #bfbfbf',
    pointerEvents: 'none',
  },
}));

export const PrimaryOutlinedButton = styled(Button)(({ width, height }) => ({
  borderRadius: '0.5rem',
  width: width || 'max-content',
  height: height || '2rem',
  background: 'transperet',
  border: '1px solid #6fb246',
  padding: '0.5rem 1rem',
  color: '#45881c',

  '&:hover': {
    background: 'linear-gradient(172deg, #7abc51 0%, #46881c 100%)',
    color: 'white',
    '& svg path': {
      color: 'white !important',
      fill: 'white !important',
      stroke: 'white !important',
    },
  },
  '&:active': {
    boxShadow: '0 4px 15px 0 rgba(50, 104, 17, 0.4)',
    background: 'linear-gradient(172deg, #7abc51 0%, #46881c 100%)',
  },

  '&.Mui-disabled': {
    background: 'linear-gradient(174deg, #c4c4c4 0%, #8c8c8c 100%)',
    border: '1px solid #bfbfbf',
    pointerEvents: 'none',
  },
}));

export const DangerOutlinedButton = styled(Button)(({ width, height }) => ({
  borderRadius: '0.5rem',
  width: width || 'max-content',
  height: height || '2rem',
  background: 'transperet',
  border: '1px solid #B73B0B',
  padding: '0.5rem 1rem',
  color: '#B73B0B',

  '&:hover': {
    background:
      'linear-gradient(172deg, rgba(183, 59, 11, 0.69) 0%, #b73b0b 100%)',
    color: 'white',
    '& svg path': {
      color: 'white !important',
      fill: 'white !important',
      stroke: 'white !important',
    },
  },
  '&:active': {
    background:
      'linear-gradient(172deg, rgba(173, 54, 9, 0.69) 0%, #aa370a 100%)',
  },

  '&.Mui-disabled': {
    background: 'linear-gradient(174deg, #c4c4c4 0%, #8c8c8c 100%)',
    border: '1px solid #bfbfbf',
    pointerEvents: 'none',
  },
}));

export const DefaultOutlinedButton = styled(Button)(({ width, height }) => ({
  border: '1px solid #e5e5e5',
  borderRadius: '0.5rem',
  width: width || 'max-content',
  height: height || '2rem',
  background: 'transperet',
  padding: '0.38rem 0.75rem',
  color: '#323031',

  '&:hover': {
    background: '#f3f3f5',
    borderColor: 'rgba(0, 0, 0, 0.2)',
  },
  '&:active': {
    background: '#e7e7ea',
  },

  '&.Mui-disabled': {
    backgroundColor: '#e5e5e5',
    border: '1px solid #bfbfbf',
    pointerEvents: 'none',
    color: '#4A5565',
  },
}));
