import { Box, Button, Stack } from '@mui/material';
import { ExitSvg, ExportSvg } from '../icons/icons';
import {
  DangerOutlinedButton,
  DefaultOutlinedButton,
  PrimaryOutlinedButton,
} from './Buttons';

export const ExportButton = (props) => {
  return (
    <Button
      {...props}
      sx={{
        width: '1.5rem',
        maxWidth: '1.5rem',
        minWidth: '1.5rem',
        height: '1.5rem',
        border: '1px solid rgba(0, 0, 0, 0.1)',
        margin: '0',
        padding: '0',
        '&:hover': {
          backgroundColor: '#f3f3f5',
        },
      }}
    >
      <ExportSvg size="1rem" />
    </Button>
  );
};

export const ExportWithTextButton = (props) => {
  return (
    <PrimaryOutlinedButton {...props}>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: '.375rem' }}>
        <ExportSvg size="1rem" color="#45881c" strokeWidth={'.33px'} />
        <span style={{ fontSize: '.88rem' }}>
          {props?.text || 'Экспорт'}
        </span>
      </Stack>
    </PrimaryOutlinedButton>
  );
};

export const ExportExitButton = (props) => {
  return (
    <DangerOutlinedButton {...props}>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: '.375rem' }}>
        <ExitSvg size="1rem" />
        <span>Выйти из режима экспорта</span>
      </Stack>
    </DangerOutlinedButton>
  );
};

export const ExportDefaultButton = (props) => {
  return (
    <DefaultOutlinedButton {...props}>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: '.375rem' }}>
        <ExportSvg color="#4a5565" strokeWidth={'.33'} size="1rem" />
        <span>{props?.text || 'Экспорт'}</span>
      </Stack>
    </DefaultOutlinedButton>
  );
};