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

export default async function HeaderSettingsPage() {
  const header = await getHeaderContent();

  return (
    <div>
      <PageHeader
        title="Header & logo"
        description="Update the site logo and brand text shown in the header."
        action={
          <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
            ← Back
          </Link>
        }
      />
      <SettingsSaveForm action={updateHeaderSettings}>
        <TextInput label="Title" name="header_title" defaultValue={header.title} />
        <TextInput
          label="Subtitle"
          name="header_subtitle"
          defaultValue={header.subtitle}
        />
        <ImageField
          label="Replace logo"
          name="header_logo"
          currentUrl={header.logoUrl}
          alt="Header logo"
        />
      </SettingsSaveForm>
    </div>
  );
}
