import React from 'react'

export interface SidebarElementProps {
  name: string
  imageUrl: string
  url: string
  isActive: boolean
  onClick: () => void
}

const SidebarElement: React.FC<SidebarElementProps> = ({ name, imageUrl, isActive, onClick }) => {
  return (
    <div className={`sidebar-item ${isActive ? 'active' : ''}`} onClick={onClick}>
      {imageUrl ? (
        <img src={imageUrl} alt={name} className="sidebar-app-icon" />
      ) : (
        <div className="sidebar-app-icon sidebar-app-icon-placeholder">
          {name.charAt(0).toUpperCase()}
        </div>
      )}
      <span>{name}</span>
    </div>
  )
}

export default SidebarElement