import React , { useRef } from 'react' ; import * as Styled from './SkillIcon.styles' ; import Image from 'next/image' ; import useHover from '../../../hooks/useHover' ; export interface Props { iconSrc : string ; text : string ; iconSize : { height : number ; width : number ; } ; } function param { string } iconSrc param { string } text param { object } iconSize returns { JSX . Element } const Component = ( { iconSrc , text , iconSize } ) : JSX . Element => { const containerRef = useRef < null | HTMLDivElement > ( null ) ; const isHovering = useHover ( containerRef ) ; return ( < Styled . Container ref = { containerRef } isHovering = { isHovering } > < Image src = { iconSrc } height = { iconSize . height } width = { iconSize . width } alt = { `Icon of ${ text } tool` } objectFit = { 'contain' } className = { 'icon-img' } / > < Styled . SkillText > < Styled . IconText isHovering = { isHovering } > { text } < /Styled.IconText> < /Styled.SkillText> < /Styled.Container>); } ; export default Component ;