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

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

export default async function BlogsSectionSettingsPage() {
  const section = await getBlogsSectionContent();

  return (
    <div>
      <PageHeader
        title="Blog section"
        description="Edit the homepage blog heading and introduction."
        action={
          <div className="flex gap-4">
            <Link href="/admin/blogs" className="text-sm font-semibold text-[#1f3fb8]">
              Manage blog posts
            </Link>
            <Link href="/admin/homepage" className="text-sm font-semibold text-[#1f3fb8]">
              ← Back
            </Link>
          </div>
        }
      />
      <SettingsSaveForm action={updateBlogsSectionSettings}>
        <TextInput
          label="Heading"
          name="blogs_heading"
          defaultValue={section.heading}
        />
        <TextInput
          label="Introduction"
          name="blogs_body"
          defaultValue={section.body}
          rows={3}
        />
      </SettingsSaveForm>
    </div>
  );
}
