import Link from "next/link";
import type { Metadata } from "next";
import { getAboutContent } from "@/app/lib/content";
import { updateAboutSettings } 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: "About settings" };

export default async function AboutSettingsPage() {
  const about = await getAboutContent();

  return (
    <div>
      <PageHeader
        title="About section"
        description="Edit about copy, CTA, and both images."
        action={
          <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
            ← Back
          </Link>
        }
      />
      <SettingsSaveForm action={updateAboutSettings}>
        <TextInput label="Heading" name="about_heading" defaultValue={about.heading} />
        <TextInput label="Body" name="about_body" defaultValue={about.body} rows={4} />
        <TextInput
          label="CTA text"
          name="about_cta_text"
          defaultValue={about.ctaText}
        />
        <TextInput
          label="CTA link"
          name="about_cta_href"
          defaultValue={about.ctaHref}
        />
        <ImageField
          label="Replace primary image"
          name="about_image_primary"
          currentUrl={about.primaryImage}
        />
        <ImageField
          label="Replace secondary image"
          name="about_image_secondary"
          currentUrl={about.secondaryImage}
        />
      </SettingsSaveForm>
    </div>
  );
}
