import type { ReactNode } from "react"
import brandIcon from "../../assets/brand-icon.png"

interface SidebarProps {
  topContent: ReactNode
  bottomContent: ReactNode
  isCollapsed: boolean
  onToggleCollapsed(): void
}

export function Sidebar({ topContent, bottomContent, isCollapsed, onToggleCollapsed }: SidebarProps) {
  return (
    <aside className="sidebar conversation-sidebar-layout app-drag-region">
      <div className="sidebar-brand">
        <img src={brandIcon} alt="" className="sidebar-brand-logo" />
        <strong className="sidebar-brand-name">千匠问天</strong>
        <button
          type="button"
          className="sidebar-collapse-button app-no-drag"
          aria-label={isCollapsed ? "展开侧栏" : "折叠侧栏"}
          aria-expanded={!isCollapsed}
          onClick={onToggleCollapsed}
        >
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            {isCollapsed ? (
              <path d="m10 7 5 5-5 5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
            ) : (
              <path d="m14 7-5 5 5 5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
            )}
          </svg>
        </button>
      </div>
      <div className="sidebar-top">
        {topContent}
      </div>
      <div className="sidebar-bottom">
        {bottomContent}
      </div>
    </aside>
  )
}
