"use client"

import { Settings as SettingsIcon } from "lucide-react"

import { FormPageHeader } from "@/app/dashboard/_components/form"
import { CommonSettingsContent } from "@/components/settings/common/common-settings-content"
import type { CommonSettingsValues } from "@/components/settings/data/common-settings.defaults"
import type { SocialMediaSettingsValues } from "@/components/settings/data/social-media.defaults"
import { SocialMediaSettingsContent } from "@/components/settings/social-media/social-media-settings-content"
import {
  SettingsTabNav,
  type SettingsTabId,
} from "@/components/settings/ui/settings-tab-nav"

type SettingsTabsPageProps = {
  activeTab: SettingsTabId
  commonSettings: CommonSettingsValues
  socialMediaSettings: SocialMediaSettingsValues
  errorMessage?: string | null
}

export function SettingsTabsPage({
  activeTab,
  commonSettings,
  socialMediaSettings,
  errorMessage,
}: SettingsTabsPageProps) {
  return (
    <div className="flex flex-col">
      <FormPageHeader
        titleIcon={<SettingsIcon className="size-4 text-primary" />}
        title="Settings"
        description="Configure platform-wide options, contact details, and social profiles."
        breadcrumb={[{ label: "Settings" }]}
      />

      <div className="overflow-hidden rounded-lg border border-border bg-background shadow-sm">
        <SettingsTabNav activeTab={activeTab} />

        {errorMessage ? (
          <div className="border-b border-destructive/20 bg-destructive/5 px-4 py-3 text-sm text-destructive sm:px-6">
            {errorMessage}
          </div>
        ) : null}

        <div className="min-h-[320px] bg-background">
          {activeTab === "common" ? (
            <CommonSettingsContent initialValues={commonSettings} />
          ) : (
            <SocialMediaSettingsContent initialValues={socialMediaSettings} />
          )}
        </div>
      </div>
    </div>
  )
}