import { useNavigate } from 'react-router-dom'
import Header from '../components/layout/Header'
import FacilityCard from '../components/facility/FacilityCard'
import styles from './FacilityStatusPage.module.css'

interface Facility {
  id: number
  name: string
  workers: number
}

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

  const facilities: Facility[] = [
    { id: 1, name: '물류동', workers: 1256 },
    { id: 2, name: '생산동', workers: 564 },
    { id: 3, name: '관리동', workers: 2 },
    { id: 4, name: '위험물', workers: 36 },
    { id: 5, name: '휴게동', workers: 56 },
    { id: 6, name: '생산동', workers: 64 },
  ]

  const handleFacilityClick = (facility: Facility) => {
    navigate(`/facility-status/${facility.name}`)
  }

  return (
    <div className={styles.container}>
      {/* Background blur effect */}
      <div className={styles.bgBlur} />

      {/* Header with back button and menu */}
      <Header showBackButton showMenu />

      {/* Content */}
      <div className={styles.content}>
        <h1 className={styles.pageTitle}>시설별 현황</h1>

        <h2 className={styles.sectionTitle}>전체 건물</h2>

        <div className={styles.facilityGrid}>
          {facilities.map((facility) => (
            <FacilityCard
              key={facility.id}
              name={facility.name}
              workers={facility.workers}
              onClick={() => handleFacilityClick(facility)}
            />
          ))}
        </div>
      </div>
    </div>
  )
}
