"use client";

import styles from "./appointment-toggle-card.module.scss";
import PageIntro from "../page-intro";

interface Props {
  isActive: boolean;
  onToggle: () => void;
}

export default function AppointmentToggleCard({
  isActive,
  onToggle,
}: Props) {
  return (
    <div className={styles.card}>
      {/* TEXT */}
      <div className={styles.content}>
        <PageIntro 
          title={ isActive
            ? "Accepting Appointments"
            : "Bookings Closed" }
          description={isActive
            ? "Members can currently request appointments"
            : "Members cannot book appointments at the moment"}
        />
        {/* STATUS BADGE */}
        <span
          className={`${styles.badge} ${
            isActive ? styles.activeBadge : styles.inactiveBadge
          }`}
        >
          {isActive ? "Accepting bookings" : "Bookings closed"}
        </span>
      </div>

      {/* TOGGLE */}
      <button
        className={`${styles.switch} ${
          isActive ? styles.active : ""
        }`}
        onClick={onToggle}
      >
        <span className={styles.knob} />
      </button>
    </div>
  );
}