import styles from './FloorSection.module.css'

interface FloorSectionProps {
  floorName: string
  workerCount: number
  children: React.ReactNode
  onFloorLogClick?: () => void
}

export default function FloorSection({
  floorName,
  workerCount,
  children,
  onFloorLogClick
}: FloorSectionProps) {
  return (
    <div className={styles.section}>
      <div className={styles.headerWrapper}>
        <div className={styles.header}>
          <span className={styles.floorName}>{floorName}</span>
          <div className={styles.workerInfo}>
            <svg
              className={styles.personIcon}
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8 8C9.84 8 11.333 6.507 11.333 4.667C11.333 2.827 9.84 1.333 8 1.333C6.16 1.333 4.667 2.827 4.667 4.667C4.667 6.507 6.16 8 8 8ZM8 9.667C5.78 9.667 1.333 10.78 1.333 13V14.667H14.667V13C14.667 10.78 10.22 9.667 8 9.667Z"
                fill="rgba(255, 255, 255, 0.6)"
              />
            </svg>
            <span className={styles.workerCount}>{workerCount}</span>
          </div>
        </div>

        <button className={styles.floorLogButton} onClick={onFloorLogClick}>
          <span className={styles.floorLogButtonText}>층별 출입로그 보기</span>
        </button>
      </div>

      <div className={styles.entryList}>{children}</div>
    </div>
  )
}
