.profile/components/Interests/InterestsList/InterestItem.tsx

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'

interface InterestItemProps {
  title: string
  fontAwesomeIcon: IconDefinition
}

export const InterestItem = (props: InterestItemProps): JSX.Element => {
  const { fontAwesomeIcon, title } = props

  return (
    <li className='interest-item mx-2 my-2 h-8 w-8' title={title}>
      <FontAwesomeIcon
        className='block h-full w-full text-yellow dark:text-yellow-dark'
        icon={fontAwesomeIcon}
      />
    </li>
  )
}