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

interface FacilityCardProps {
  name: string
  workers: number
  onClick?: () => void
}

export default function FacilityCard({ name, workers, onClick }: FacilityCardProps) {
  return (
    <div className={styles.card} onClick={onClick}>
      <div className={styles.header}>
        <span className={styles.name}>{name}</span>
        <div className={styles.arrowButton}>
          <svg
            className={styles.arrowIcon}
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3.5 8H12.5M12.5 8L8.5 4M12.5 8L8.5 12"
              stroke="white"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      </div>
      <div className={styles.workerInfo}>
        <svg
          className={styles.personIcon}
          viewBox="0 0 12 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 6C7.38071 6 8.5 4.88071 8.5 3.5C8.5 2.11929 7.38071 1 6 1C4.61929 1 3.5 2.11929 3.5 3.5C3.5 4.88071 4.61929 6 6 6ZM6 7.25C4.16625 7.25 0.5 8.17125 0.5 10V11H11.5V10C11.5 8.17125 7.83375 7.25 6 7.25Z"
            fill="rgba(255, 255, 255, 0.6)"
          />
        </svg>
        <span className={styles.count}>{workers.toLocaleString()}</span>
      </div>
    </div>
  )
}
