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

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={Text({ textId: '@ExportAsJSON' })}
        onClick={props.saveEditorAsJSON}
      >
        <ArrowUpOnSquareIcon className="heroicon w-16 h-7" />
        {Text({ textId: '@ExportAsJSON' })}
      </button>
      <button type="button"
        className={'w-full transition-all flex sidebar-component'}
        title={Text({ textId: '@ExportAsSVG' })}
        onClick={props.saveEditorAsSVG}
      >
        <CameraIcon className="heroicon w-16 h-7" />
        {Text({ textId: '@ExportAsSVG' })}
      </button>
    </div>
  );
}
