import styled, { useTheme } from "styled-components";
import { IconComponent as Icon } from '../../../const/theme/icons';
import { ThemName } from "../../../const/theme/names";

const Button = styled.div`
    width: 100%;
    cursor: pointer;
`

const IconContainer = styled.div`
    padding: 10px;
    color: ${props => props.theme.text};
`

export default function ThemeButton() {
  const theme = useTheme();
  const name = localStorage.getItem('theme') as ThemName
  
  return (
    <Button onClick={theme.toggleTheme}>
      <IconContainer>
        <Icon name={name} width="30" height="30"/>
      </IconContainer>
    </Button>
  );
}