"use client"

import { FormSaveBar } from "@/app/dashboard/_components/form"
import { saveCommonSettings } from "@/components/settings/api/common-settings.api"
import type { CommonSettingsValues } from "@/components/settings/data/common-settings.defaults"
import { commonSettingsSections } from "@/components/settings/data/common-settings.sections"
import { useSettingsForm } from "@/components/settings/hooks/use-settings-form"
import { SettingsCard } from "@/components/settings/ui/settings-card"
import { SettingsFieldsRenderer } from "@/components/settings/ui/settings-fields-renderer"

type CommonSettingsContentProps = {
  initialValues: CommonSettingsValues
}

export function CommonSettingsContent({ initialValues }: CommonSettingsContentProps) {
  const { values, isSaving, handleChange, handleReset, handleSave } = useSettingsForm(
    initialValues,
    saveCommonSettings
  )

  return (
    <form
      className="flex flex-col"
      onSubmit={(e) => {
        e.preventDefault()
        void handleSave()
      }}
    >
      <div className="flex flex-col gap-6 p-4 sm:p-6">
        {commonSettingsSections.map((section) => (
          <SettingsCard
            key={section.id}
            title={section.title}
            description={section.description}
          >
            <SettingsFieldsRenderer
              fields={section.fields}
              values={values}
              onChange={handleChange}
            />
          </SettingsCard>
        ))}
      </div>

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