import React from 'react';
import InnerCircle from 'assets/images/inner-circle.png';
import OuterCircle from 'assets/images/outer-circle.png';
import './button.css';

export default function Button({ theme, setTheme }) {
  const toggle = () => {
    localStorage.setItem('theme', !theme);
    setTheme(!theme);
  };

  return (
    <>
      <button className="sun-sircle" onClick={toggle}>
        <div className="inner-circle">
          <img src={InnerCircle} alt="inner-circle" />
        </div>
        <div className="outer-circle">
          <img src={OuterCircle} alt="outer-circle" />
        </div>
      </button>
    </>
  );
}