import { routeIntercept } from '../../functions/Route'
import './styles/SidebarItemIcon.css'

interface PropsForSidebarItemIcon {
    icon: string
    label: string
    description: string
    location: string
}

export default function SidebarItemIcon({ icon, label, description, location }: PropsForSidebarItemIcon) {
    return (
        <a className="item-icon" href={location} onClick={routeIntercept}>
            <div className="section-left">
                <span className="header animation-scroll-in" aria-label={label}>
                    {label.toUpperCase()}
                </span>
                <span className="subheader animation-scroll-in" aria-label={description}>
                    {description.toUpperCase()}
                </span>
            </div>
            <div className="section-right animation-fade-in">
                <img className="foreground" src={icon} />
                <div className="background"></div>
            </div>
        </a>
    )
}