import React, {useState, useEffect, ReactNode} from 'react';
import {Link} from "react-router-dom";
import Typography from '../../UI/Typography/Typography';
import AlternativeTooltip from '../../UI/AlternativeTooltip/AlternativeTooltip';
import warning from '../../../assets/images/tooltip-warning.svg';
import ok from '../../../assets/images/tooltip-ok.svg';
import './setting-box.scss';


type SettingBoxProps =
    {
        hypertitle?: string  | null
            title?: string  | null
        subtitle?: string  | null
        tooltip?: 'pending' | 'complete' | ''
        icon?: JSX.Element
        route?: string
    }

const SettingBox = ({
                        hypertitle,
                        title,
                        subtitle,
                        tooltip = '',
                        icon,
                        route
                    }: SettingBoxProps) => {

    return (
        <Link to={`${route}`}>
            <div className='setting-box'>
                {tooltip === 'complete' &&
                    <AlternativeTooltip icon={ok} text={'Έχουν γίνει όλες οι απαραίτητες ενέργειες.'}/>}

                {tooltip === 'pending' &&
                    <AlternativeTooltip icon={warning} text={'Δεν έχουν γίνει όλες οι απαραίτητες ενέργειες.'}/>}
                <span className={'icon'}>{icon}</span>
                <div className='setting-box--text-container'>
                    <Typography className='change-on-hover hypertitle mb-2' fontSize={'10px'} fontWeight={'900'} letterSpacing={'0.2px'}
                                color={'#040059'} tag={'p'}>{hypertitle}</Typography>
                    <Typography className='change-on-hover mb-1' fontSize={'20px'} fontWeight={'900'} letterSpacing={'0.4px'}
                                color={'#040059'} tag={'p'}>{title}</Typography>
                    <Typography className='change-on-hover' fontSize={'16px'} fontWeight={'200'}
                                letterSpacing={'0.32px'} color={'#707070'} tag={'p'}>{subtitle}</Typography>
                </div>
            </div>
        </Link>
    );
}

export default SettingBox;