"use client";

import Link from "next/link";
import { Crown } from "lucide-react";
import { BookingFlow } from "./BookingFlow";
import { useAuthContext } from "@/components/FirebaseProvider";
import { isMember } from "@/lib/roles";

export default function CounselingPage() {
  const { profile, loading } = useAuthContext();

  return (
    <div className="space-y-8">
      <div>
        <h1 className="font-display text-3xl font-semibold text-ink">
          Booking Konseling
        </h1>
        <p className="mt-1 text-ink-soft">
          Jadwalkan sesi 1-on-1 dengan psikolog terpilih.
        </p>
      </div>

      {!loading && !isMember(profile) ? (
        <div className="flex flex-col items-start gap-3 rounded-2xl border border-accent/40 bg-accent/10 p-6">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent">
            <Crown size={18} />
          </div>
          <div>
            <p className="font-semibold text-ink">Booking Konseling Khusus Member</p>
            <p className="mt-1 text-sm text-ink-soft">
              Upgrade ke Member untuk bisa jadwalkan sesi 1-on-1 langsung dengan psikolog kami.
            </p>
          </div>
          <Link
            href="/dashboard/membership"
            className="rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary-soft"
          >
            Upgrade ke Member
          </Link>
        </div>
      ) : (
        !loading && <BookingFlow />
      )}
    </div>
  );
}