import { useNavigate } from 'react-router-dom'
import styles from './NonEvacueeListPage.module.css'
import closeIcon from '../assets/close-icon.svg'

// Mock data - 추후 API 연동
const nonEvacueeData = {
  count: 356,
  list: [
    { tagId: 'MK0100', location: '연구A동' },
    { tagId: 'MK0101', location: '연구A동' },
    { tagId: 'MK0102', location: '본관' },
    { tagId: 'MK0103', location: '휴게동' },
    { tagId: 'MK0104', location: '연구B동' },
    { tagId: 'MK0105', location: '주차장' },
    { tagId: 'MK0106', location: '연구A동' },
    { tagId: 'MK0107', location: '본관' },
    { tagId: 'MK0108', location: '휴게동' },
    { tagId: 'MK0109', location: '연구A동' },
    { tagId: 'MK0110', location: '연구B동' },
    { tagId: 'MK0111', location: '본관' },
    { tagId: 'MK0112', location: '주차장' },
    { tagId: 'MK0113', location: '연구A동' },
    { tagId: 'MK0114', location: '휴게동' },
    { tagId: 'MK0115', location: '연구B동' },
  ]
}

export default function NonEvacueeListPage() {
  const navigate = useNavigate()

  const handleClose = () => {
    navigate(-1)
  }

  return (
    <div className={styles.container}>
      {/* 닫기 버튼 */}
      <button className={styles.closeButton} onClick={handleClose}>
        <img src={closeIcon} alt="닫기" />
      </button>

      {/* 제목 */}
      <div className={styles.titleSection}>
        <h1 className={styles.title}>미대피자 목록 ({nonEvacueeData.count})</h1>
      </div>

      {/* 테이블 컨텐츠 */}
      <div className={styles.tableContent}>
        {/* 검색결과 테이블 */}
        <div className={styles.resultTable}>
          {/* 테이블 헤더 */}
          <div className={styles.tableHeader}>
            <span className={styles.headerCell}>TagID</span>
            <span className={styles.headerCell}>최종 위치</span>
          </div>

          {/* 테이블 바디 */}
          <div className={styles.tableBody}>
            {nonEvacueeData.list.map((item, index) => (
              <div key={index} className={styles.tableRow}>
                <span className={styles.tableCell}>{item.tagId}</span>
                <span className={styles.tableCell}>{item.location}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
