import { useCurrentMarketingPlan } from "@/features/plan/hooks/useCurrentMarketingPlan";
import { PlanHeaderDaysBadge } from "@/features/plan/ui/header/PlanHeaderDaysBadge";
import { PlanHeaderHeroBlobs } from "@/features/plan/ui/header/PlanHeaderHeroBlobs";
import { PlanHeaderHeroColumn } from "@/features/plan/ui/header/PlanHeaderHeroColumn";
import { PLAN_HEADER_BG_CLASS } from "@/features/plan/ui/header/planHeaderSectionClasses";

export function PlanHeaderSection() {
  const { data, error } = useCurrentMarketingPlan();

  if (error || !data) {
    return null;
  }

  return (
    <section
      aria-label="마케팅 플랜 헤더"
      className={`relative overflow-hidden scroll-mt-36 py-20 md:py-28 px-6 ${PLAN_HEADER_BG_CLASS}`}
    >
      <PlanHeaderHeroBlobs />

      <div className="relative max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-10">
          <PlanHeaderHeroColumn
            clinicName={data.clinicName}
            clinicNameEn={data.clinicNameEn}
            date={data.createdAt}
            targetUrl={data.targetUrl}
          />
          <PlanHeaderDaysBadge />
        </div>
      </div>
    </section>
  );
}