import * as React from 'react';
import './ToggleSideBar.scss';

interface IToggleSidebarProps {
  title: string
  checked: boolean
  onClick: () => void
}

export function ToggleSideBar({ title, checked, onClick }: IToggleSidebarProps): JSX.Element {
  return (
    <div className={`${(checked
      ? 'bg-slate-400 hover:bg-slate-500'
      : 'bg-slate-300 hover:bg-slate-400')}`}>
      <button
        className={'w-full py-2'}
        type='button'
        onClick={onClick}
      >
        <p className='text-vertical'>{title}
        </p>
      </button>
    </div>
  );
}