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

interface EntryCardProps {
  floor: string
  location: string
  inCount: number
  outCount: number
  anchorStatus: 'normal' | 'broken'
  onLogClick?: () => void
}

export default function EntryCard({
  floor,
  location,
  inCount,
  outCount,
  anchorStatus,
  onLogClick
}: EntryCardProps) {
  return (
    <div className={styles.card}>
      <div className={styles.content}>
        <div className={styles.mainInfo}>
          <div className={styles.locationInfo}>
            <span className={styles.locationName}>{floor}</span>
            <span className={styles.locationName}>{location}</span>
          </div>
          <div className={styles.stats}>
            <div className={styles.stat}>
              <span className={styles.statLabel}>IN</span>
              <span className={styles.statValue}>{inCount}</span>
            </div>
            <div className={styles.stat}>
              <span className={styles.statLabel}>OUT</span>
              <span className={styles.statValue}>{outCount}</span>
            </div>
          </div>
        </div>

        <div className={styles.anchorInfo}>
          <span className={styles.anchorLabel}>앵커</span>
          <div className={styles.anchorStatus}>
            <div
              className={`${styles.statusDot} ${
                anchorStatus === 'normal' ? styles.normal : styles.broken
              }`}
            />
            <span
              className={`${styles.statusText} ${
                anchorStatus === 'normal' ? styles.normal : styles.broken
              }`}
            >
              {anchorStatus === 'normal' ? '정상' : '고장'}
            </span>
          </div>
        </div>
      </div>

      <button className={styles.logButton} onClick={onLogClick}>
        <span className={styles.logButtonText}>출입로그 보기</span>
      </button>
    </div>
  )
}
