"use client";

import { useCalendarContext } from "@/components/providers/CalendarProvider";
import CalendarHeader from "./CalendarHeader";
import MonthGrid from "./MonthGrid";
import DayPanel from "./DayPanel";

interface CalendarViewProps {
  activeSubcategory: string;
}

export default function CalendarView({ activeSubcategory }: CalendarViewProps) {
  const { loading, error, selectedDate } = useCalendarContext();

  if (loading) {
    return (
      <div className="p-6 text-zinc-500">Loading calendar...</div>
    );
  }

  if (error) {
    return (
      <div className="p-6 text-red-500">
        Calendar service error: {error}
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col p-3 md:p-6">
      <CalendarHeader />
      <div className="flex min-h-0 flex-1 flex-col gap-4 md:flex-row">
        <div className="flex-1 overflow-auto">
          <MonthGrid />
        </div>
        {selectedDate && (
          <div className="max-h-[40vh] shrink-0 border-t border-zinc-200 pt-4 md:max-h-none md:w-80 md:border-l md:border-t-0 md:pl-4 md:pt-0 overflow-auto dark:border-zinc-700">
            <DayPanel />
          </div>
        )}
      </div>
    </div>
  );
}
