"use client";

import React, { useEffect, useState } from "react";

/**
 * Automatisierte Anzeige der Projekt-Verfügbarkeit nach Quartalen.
 * Berechnet das aktuelle Quartal basierend auf dem heutigen Datum.
 */
export const Availability: React.FC = () => {
  const [text, setText] = useState<string>("");

  useEffect(() => {
    const now = new Date();
    const month = now.getMonth(); // 0-11
    const year = now.getFullYear();
    const quarter = Math.floor(month / 3) + 1;
    
    // Aktuelles Quartal formatiert (z.B. Q2 2026)
    setText(`Q${quarter} ${year}`);
  }, []);

  // Während Hydrierung nichts rendern, um Mismatches zu vermeiden (bei Client-only Logic)
  if (!text) return <span className="opacity-0">Q- 202-</span>;

  return <>{text}</>;
};