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

interface ActionButtonProps {
  children: React.ReactNode;
  variant?: 'outlined' | 'contained';
  startIcon?: React.ReactNode;
  onClick?: () => void;
}

const StyledButton = styled(Button)<{ variant?: 'outlined' | 'contained' }>(({ theme, variant }) => ({
  borderRadius: '1234px',
  padding: '12px 16px',
  fontSize: '14px',
  fontWeight: 700,
  letterSpacing: '-0.08px',
  textTransform: 'none',
  gap: '8px',
  ...(variant === 'outlined' && {
    border: '1px solid #cbd5e1',
    color: theme.palette.text.secondary,
    backgroundColor: 'transparent',
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.04)'
    }
  }),
  ...(variant === 'contained' && {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark
    }
  })
}));

const ActionButton: React.FC<ActionButtonProps> = ({ 
  children, 
  variant = 'outlined', 
  startIcon, 
  onClick 
}) => {
  return (
    <StyledButton
      variant={variant}
      startIcon={startIcon}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

export default ActionButton;