import CalendarDayCell from "./CalendarDayCell";
import type { CalendarDay, EnrichedCalendarPost } from "../../hooks/useCalendarPosts";

const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

interface Props {
  days: CalendarDay[];
  onPostClick: (post: EnrichedCalendarPost) => void;
  onCreatePost?: (date?: string) => void;
}

export default function CalendarGrid({ days, onPostClick, onCreatePost }: Props) {
  return (
    <div className="vr-border vr-border-gray-200 vr-rounded-lg vr-overflow-hidden">
      {/* Day name headers */}
      <div className="vr-grid vr-grid-cols-7">
        {DAY_NAMES.map((name) => (
          <div
            key={name}
            className="vr-bg-gray-50 vr-text-center vr-py-2 vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wider vr-border-b vr-border-r vr-border-gray-100"
          >
            {name}
          </div>
        ))}
      </div>

      {/* Day cells */}
      <div className="vr-grid vr-grid-cols-7">
        {days.map((day) => (
          <CalendarDayCell
            key={day.dateKey}
            day={day}
            onPostClick={onPostClick}
            onCreatePost={onCreatePost}
          />
        ))}
      </div>
    </div>
  );
}