import { ArrowUpOnSquareIcon, CameraIcon } from '@heroicons/react/24/outline';
import React from 'react';

interface ISettingsProps {
  saveEditorAsJSON: () => void
  saveEditorAsSVG: () => void
};

export function Settings(props: ISettingsProps): JSX.Element {
  return (
    <div className='transition-all grid grid-cols-1 overflow-auto md:grid-cols-1 gap-2
         m-2 md:text-xs font-bold'>
      <button type="button"
        className={'w-full transition-all flex sidebar-component'}
        title='Export as JSON'
        onClick={props.saveEditorAsJSON}
      >
        <ArrowUpOnSquareIcon className="heroicon w-16 h-7" />
        Export as JSON
      </button>
      <button type="button"
        className={'w-full transition-all flex sidebar-component'}
        title='Export as SVG'
        onClick={props.saveEditorAsSVG}
      >
        <CameraIcon className="heroicon w-16 h-7" />
        Export as SVG
      </button>
    </div>
  );
}