import Link from "next/link";
import type { Metadata } from "next";
import { getProgramsSectionContent } from "@/app/lib/content";
import { updateProgramsSectionSettings } from "@/app/actions/homepage";
import { PageHeader } from "@/app/admin/_components/ui";
import {
  ImageField,
  SettingsSaveForm,
  TextInput,
} from "@/app/admin/_components/HomepageForms";

export const metadata: Metadata = { title: "Programs section settings" };

export default async function ProgramsSectionSettingsPage() {
  const section = await getProgramsSectionContent();

  return (
    <div>
      <PageHeader
        title="Programs section"
        description="Edit the homepage programs heading, supporting text, and main image."
        action={
          <div className="flex gap-4">
            <Link href="/admin/programs" className="text-sm font-semibold text-[#1f3fb8]">
              Manage program cards
            </Link>
            <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
              ← Back
            </Link>
          </div>
        }
      />
      <SettingsSaveForm action={updateProgramsSectionSettings}>
        <TextInput
          label="Heading"
          name="programs_heading"
          defaultValue={section.heading}
        />
        <TextInput
          label="Supporting text"
          name="programs_body"
          defaultValue={section.body}
          rows={3}
        />
        <ImageField
          label="Replace main image"
          name="programs_image"
          currentUrl={section.imageUrl}
        />
      </SettingsSaveForm>
    </div>
  );
}
