import React from 'react'
import Link from 'next/link'

interface Props {
  icon: any
  name: string
  href: string
  isExpanded: boolean
  isActive?: boolean
}

export const SidebarItem: React.FC<Props> = ({
  icon: Icon,
  name,
  href,
  isExpanded,
  isActive = false,
}) => {
  return (
    <li className={`flex items-center relative hover:bg-primary-10`}>
      <div
        className={`absolute left-0 top-0 h-full w-1 ${isActive ? 'bg-red-500' : 'bg-primary-dark'}`}></div>
      <Link
        href={href}
        className={`flex  ${isExpanded ? 'flex-col md:flex-row' : 'flex-col'} ${isActive ? 'bg-primary-dark-90' : 'bg-primary-dark'} items-center w-full px-4 py-4 hover:bg-primary-10 hover:text-primary-dark`}>
        <div>
          <Icon className="text-3xl" />
        </div>
        <span
          className={`text-center ${isExpanded ? 'md:text-left text-md md:text-lg md:ml-4' : 'text-md md:mt-2'}`}>
          {name}
        </span>
      </Link>
    </li>
  )
}