<template>
  <header class="navbar navbar-expand-lg shadow-sm custom-header">
    <div class="container-fluid px-4" style="max-width: 1400px;">
      <a class="navbar-brand d-flex align-items-center gap-2 fw-bold" href="#">
        <div class="logo-icon">
          <i class="fas fa-graduation-cap"></i>
        </div>
        <span class="brand-text">Future Class <span class="text-primary">Lab.</span></span>
      </a>

      <div class="d-flex align-items-center gap-2 mt-2 mt-lg-0">
        <span class="mode-label" :class="{ 'active': !isSchoolMode }"><i class="fas fa-book-open"></i> 도서관 모드</span>
        <div class="form-check form-switch custom-switch fs-4 mb-0">
          <input 
            class="form-check-input cursor-pointer" 
            type="checkbox" 
            role="switch" 
            id="modeSwitch" 
            :checked="isSchoolMode"
            @change="$emit('toggle-mode')"
          >
        </div>
        <span class="mode-label" :class="{ 'active': isSchoolMode }"><i class="fas fa-school"></i> 학교 모드</span>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  props: {
    isSchoolMode: Boolean
  }
};
</script>

<style scoped>
.custom-header {
  background-color: #ffffff;
  border-bottom: 2px solid #f1f3f5;
  padding: 12px 0;
}
.logo-icon {
  background: linear-gradient(135deg, #0d6efd, #00c6ff);
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.2rem;
}
.brand-text {
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  color: #2c3e50;
}
.mode-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #adb5bd;
  transition: color 0.3s;
}
.mode-label.active {
  color: #2c3e50;
}
.custom-switch .form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
}
.cursor-pointer {
  cursor: pointer;
}
</style>