import React , { FC , useState } from 'react' ; import * as Styled from './SettingsButton.styles' ; import { FiChevronRight } from 'react-icons/fi' ; import Paragraph from '../Typography/Paragraph/Paragraph' ; export interface Props extends React . ComponentPropsWithoutRef < 'button' > { variant : 'icon' | 'action' ; isTurnedOn : boolean ; text : string ; btnAction : ( ( ) => void ) | null ; } function param { enum } variant param { boolean } isTurnedOn param { string } text param { children } children param { function } btnAction param { rest } rest returns { JSX . Element } const SettingsButton = ( { variant , isTurnedOn , text , children , btnAction , ... rest } ) : JSX . Element => { const [ isActive , setIsActive ] = useState ( isTurnedOn ) ; const handleClick = ( ) => { btnAction && btnAction ( ) ; setIsActive ( ( prev ) => ! prev ) ; } ; return ( < Styled . ButtonContainer > < Styled . Button isTurnedOn = { isActive } { ... rest } onClick = { handleClick } > { children } { variant === 'action' ? < FiChevronRight className = "icon" / > : '' } < /Styled.Button> < Paragraph margin = { '0' } > { text } < /Paragraph> < /Styled.ButtonContainer>); } ; export default SettingsButton ;