"use client"

import { FormSaveBar } from "@/app/dashboard/_components/form"
import { saveSocialMediaSettings } from "@/components/settings/api/common-settings.api"
import {
  socialMediaFields,
  type SocialMediaSettingsValues,
} from "@/components/settings/data/social-media.defaults"
import { useSettingsForm } from "@/components/settings/hooks/use-settings-form"
import { SettingsFieldsRenderer } from "@/components/settings/ui/settings-fields-renderer"

type SocialMediaSettingsContentProps = {
  initialValues: SocialMediaSettingsValues
}

export function SocialMediaSettingsContent({
  initialValues,
}: SocialMediaSettingsContentProps) {
  const { values, isSaving, handleChange, handleReset, handleSave } = useSettingsForm(
    initialValues,
    saveSocialMediaSettings
  )

  return (
    <form
      className="flex flex-col"
      onSubmit={(e) => {
        e.preventDefault()
        void handleSave()
      }}
    >
      <div className="max-w-3xl p-4 sm:p-6">
        <SettingsFieldsRenderer
          fields={socialMediaFields}
          values={values}
          onChange={handleChange}
          gridClassName="grid-cols-1"
        />
      </div>

      <FormSaveBar
        isSaving={isSaving}
        onSave={() => void handleSave()}
        onReset={handleReset}
      />
    </form>
  )
}