"use client"

import React, { useEffect, useRef, useState } from "react"
import {
  Sparkles,
  Target,
  ShieldCheck,
  TrendingUp,
  Heart,
  Clock,
  Megaphone,
  Save,
  Pencil,
  Loader2,
  CheckCircle,
  AlertCircle,
} from "lucide-react"

import { HeroSection } from "./HeroSection"
import { MissionSection } from "./MissionSection"
import { TrustSection } from "./TrustSection"
import { ImpactSection } from "./ImpactSection"
import { CoreValuesSection } from "./CoreValuesSection"
import { HistorySection } from "./HistorySection"
import { CTASection } from "./CTASection"
import { LanguageTabs, type Language } from "../shared/LanguageTabs"
import { ABOUT_US_PAGE_LOCALE_CODES } from "@/lib/pages/about-us/locales"
import {
  createEmptyAboutUsPageFormState,
  type AboutUsPageFormStateShape,
} from "@/lib/pages/about-us/form-types"
import {
  CmsPagePendingProvider,
  useCmsPagePendingRef,
} from "@/components/dashboard/cms-pages/CmsPagePendingContext"
import {
  clearAllCmsPending,
  commitPendingHeroLocales,
  cmsPendingHasAny,
} from "@/lib/media-manager/cms-page-pending"

// ─── Section wrapper ──────────────────────────────────────────────────────────

interface SectionProps {
  id: string
  icon: React.ReactNode
  title: string
  description: string
  accent: "navy" | "green"
  children: React.ReactNode
  footer?: React.ReactNode
}

function Section({ id, icon, title, description, accent, children, footer }: SectionProps) {
  const bg = accent === "navy" ? "rgba(29,45,104,0.02)" : "rgba(43,182,115,0.02)"
  const iconBg = accent === "navy" ? "rgba(29,45,104,0.08)" : "rgba(43,182,115,0.10)"
  const iconColor = accent === "navy" ? "var(--brand-navy)" : "var(--brand-green)"

  return (
    <section className="bg-card rounded-2xl border border-border overflow-hidden" aria-labelledby={id}>
      <div
        className="flex items-center gap-3 px-6 py-4 border-b border-border"
        style={{ background: bg }}
      >
        <div
          className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
          style={{ background: iconBg }}
        >
          <span style={{ color: iconColor }} aria-hidden="true">
            {icon}
          </span>
        </div>
        <div>
          <h2 id={id} className="text-sm font-bold text-foreground font-sans">
            {title}
          </h2>
          <p className="text-xs text-muted-foreground font-sans">{description}</p>
        </div>
      </div>
      <div className="p-6">{children}</div>
      {footer ? <div className="px-6 pb-6">{footer}</div> : null}
    </section>
  )
}

// ─── Main form ────────────────────────────────────────────────────────────────

export function AboutUsForm() {
  const [activeLanguage, setActiveLanguage] = useState<Language>("en")
  return (
    <CmsPagePendingProvider activeLanguage={activeLanguage}>
      <AboutUsFormBody activeLanguage={activeLanguage} setActiveLanguage={setActiveLanguage} />
    </CmsPagePendingProvider>
  )
}

function AboutUsFormBody({
  activeLanguage,
  setActiveLanguage,
}: {
  activeLanguage: Language
  setActiveLanguage: (lang: Language) => void
}) {
  const [formByLanguage, setFormByLanguage] = useState<Record<Language, AboutUsPageFormStateShape>>({
    en: createEmptyAboutUsPageFormState(),
    tr: createEmptyAboutUsPageFormState(),
    ar: createEmptyAboutUsPageFormState(),
  })
  const [loading, setLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const [savingSectionKey, setSavingSectionKey] = useState<keyof AboutUsPageFormStateShape | null>(null)
  const [sectionFeedback, setSectionFeedback] = useState<
    Partial<Record<keyof AboutUsPageFormStateShape, { type: "success" | "error"; message: string }>>
  >({})
  const sectionFeedbackTimersRef = useRef<Partial<Record<keyof AboutUsPageFormStateShape, ReturnType<typeof setTimeout>>>>({})
  const [englishValidationTouched, setEnglishValidationTouched] = useState(false)
  const [isLockedForEditing, setIsLockedForEditing] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState<string | null>(null)
  const [saveError, setSaveError] = useState<string | null>(null)
  const isFormLocked = loading || saving || savingSectionKey !== null || isLockedForEditing
  const pendingImages = useCmsPagePendingRef()

  useEffect(() => {
    return () => clearAllCmsPending(pendingImages)
  }, [])

  async function commitPendingImagesIfAny(): Promise<Record<Language, AboutUsPageFormStateShape>> {
    if (!cmsPendingHasAny(pendingImages)) {
      return {
        en: { ...formByLanguage.en },
        tr: { ...formByLanguage.tr },
        ar: { ...formByLanguage.ar },
      }
    }
    const merged = await commitPendingHeroLocales(formByLanguage, pendingImages)
    setFormByLanguage(merged)
    return merged
  }

  function getEnglishValidationErrors() {
    const en = formByLanguage.en
    const heroQuickStatsItems = en.hero.quickStats.map((item) => ({
      label: !item.label.trim(),
      value: !item.value.trim(),
      icon: !item.icon.trim(),
    }))
    const hasHeroQuickStatErrors = heroQuickStatsItems.some((item) => item.label || item.value || item.icon)
    const missionStatsErrors = en.mission.stats.map((item) => ({
      label: !item.label.trim(),
      value: !item.value.trim(),
    }))
    const hasMissionStatsErrors = missionStatsErrors.some((item) => item.label || item.value)
    const missionFeaturesErrors = en.mission.features.map((item) => ({
      title: !item.title.trim(),
      description: !item.description.trim(),
      icon: !item.icon.trim(),
    }))
    const hasMissionFeaturesErrors = missionFeaturesErrors.some(
      (item) => item.title || item.description || item.icon
    )
    const trustStatsErrors = en.trust.stats.map((item) => ({
      label: !item.label.trim(),
      value: !item.value.trim(),
    }))
    const hasTrustStatsErrors = trustStatsErrors.some((item) => item.label || item.value)
    const impactItemsErrors = en.impact.items.map((item) => ({
      label: !item.label.trim(),
      value: !item.value.trim(),
    }))
    const hasImpactItemsErrors = impactItemsErrors.some((item) => item.label || item.value)
    const coreValuesErrors = en.coreValues.values.map((item) => ({
      title: !item.title.trim(),
      description: !item.description.trim(),
      icon: !item.icon.trim(),
    }))
    const hasCoreValuesErrors = coreValuesErrors.some(
      (item) => item.title || item.description || item.icon
    )
    const timelineErrors = en.history.timeline.map((item) => ({
      sinceText: !item.sinceText.trim(),
      title: !item.title.trim(),
      description: !item.description.trim(),
    }))
    const hasTimelineErrors = timelineErrors.some(
      (item) => item.sinceText || item.title || item.description
    )
    return {
      hero: {
        title: !en.hero.title.trim(),
        description: !en.hero.description.trim(),
        image: !en.hero.image.trim(),
        quickStats: en.hero.quickStats.length === 0 || hasHeroQuickStatErrors,
        quickStatsItems: heroQuickStatsItems,
      },
      mission: {
        eyebrow: !en.mission.eyebrow.trim(),
        title: !en.mission.title.trim(),
        description: !en.mission.description.trim(),
        stats: en.mission.stats.length === 0 || hasMissionStatsErrors,
        statsItems: missionStatsErrors,
        features: en.mission.features.length === 0 || hasMissionFeaturesErrors,
        featureItems: missionFeaturesErrors,
      },
      trust: {
        sinceText: !en.trust.sinceText.trim(),
        trustedText: !en.trust.trustedText.trim(),
        stats: en.trust.stats.length === 0 || hasTrustStatsErrors,
        statsItems: trustStatsErrors,
      },
      impact: {
        title: !en.impact.title.trim(),
        items: en.impact.items.length === 0 || hasImpactItemsErrors,
        itemErrors: impactItemsErrors,
      },
      coreValues: {
        eyebrow: !en.coreValues.eyebrow.trim(),
        title: !en.coreValues.title.trim(),
        subtitle: !en.coreValues.subtitle.trim(),
        values: en.coreValues.values.length === 0 || hasCoreValuesErrors,
        valueItems: coreValuesErrors,
      },
      history: {
        eyebrow: !en.history.eyebrow.trim(),
        title: !en.history.title.trim(),
        subtitle: !en.history.subtitle.trim(),
        timeline: en.history.timeline.length === 0 || hasTimelineErrors,
        timelineItems: timelineErrors,
      },
      cta: {
        eyebrow: !en.cta.eyebrow.trim(),
        title: !en.cta.title.trim(),
        subtitle: !en.cta.subtitle.trim(),
        primaryButtonText: !en.cta.primaryButtonText.trim(),
        primaryButtonLink: !en.cta.primaryButtonLink.trim(),
        secondaryButtonIcon: !en.cta.secondaryButtonIcon.trim(),
        secondaryButtonText: !en.cta.secondaryButtonText.trim(),
        secondaryButtonLink: !en.cta.secondaryButtonLink.trim(),
      },
    }
  }

  useEffect(() => {
    let cancelled = false
    async function load() {
      setLoading(true)
      setLoadError(null)
      try {
        const res = await fetch("/api/admin/about-us", { credentials: "include" })
        const data: { success?: boolean; error?: string; locales?: Partial<Record<Language, AboutUsPageFormStateShape>> } = await res.json()
        if (cancelled) return
        if (!res.ok || !data.success) {
          setLoadError(data.error ?? "Failed to load about us page.")
          return
        }
        setFormByLanguage((prev) => {
          const next = { ...prev }
          for (const code of ABOUT_US_PAGE_LOCALE_CODES) {
            const chunk = data.locales?.[code]
            if (chunk?.hero) next[code] = chunk
          }
          return next
        })
      } catch {
        if (!cancelled) setLoadError("Failed to load about us page. Please try again.")
      } finally {
        if (!cancelled) setLoading(false)
      }
    }
    void load()
    return () => {
      cancelled = true
    }
  }, [])

  useEffect(() => {
    return () => {
      for (const timer of Object.values(sectionFeedbackTimersRef.current)) {
        if (timer) clearTimeout(timer)
      }
    }
  }, [])

  function showSectionFeedback(
    sectionKey: keyof AboutUsPageFormStateShape,
    type: "success" | "error",
    message: string
  ) {
    const existingTimer = sectionFeedbackTimersRef.current[sectionKey]
    if (existingTimer) clearTimeout(existingTimer)
    setSectionFeedback((prev) => ({
      ...prev,
      [sectionKey]: { type, message },
    }))
    sectionFeedbackTimersRef.current[sectionKey] = setTimeout(() => {
      setSectionFeedback((prev) => {
        const next = { ...prev }
        delete next[sectionKey]
        return next
      })
      delete sectionFeedbackTimersRef.current[sectionKey]
    }, 3500)
  }

  function updateSection<K extends keyof AboutUsPageFormStateShape>(key: K, value: AboutUsPageFormStateShape[K]) {
    if (isFormLocked) return
    setFormByLanguage((prev) => ({
      ...prev,
      [activeLanguage]: { ...prev[activeLanguage], [key]: value },
    }))
    setSaveSuccess(null)
    setSaveError(null)
  }

  async function handleSave() {
    setEnglishValidationTouched(true)
    setSaving(true)
    setSaveSuccess(null)
    setSaveError(null)

    try {
      const payloadLocales = await commitPendingImagesIfAny()
      const res = await fetch("/api/admin/about-us", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ locales: payloadLocales }),
      })
      const data: { success?: boolean; error?: string } = await res.json()
      if (!res.ok || !data.success) {
        throw new Error(data.error ?? "Failed to save")
      }

      const refreshRes = await fetch("/api/admin/about-us", { credentials: "include" })
      const refreshData: { success?: boolean; error?: string; locales?: Partial<Record<Language, AboutUsPageFormStateShape>> } = await refreshRes.json()
      if (!refreshRes.ok || !refreshData.success) {
        throw new Error(refreshData.error ?? "Page saved, but failed to refresh latest data.")
      }
      setFormByLanguage((prev) => {
        const next = { ...prev }
        for (const code of ABOUT_US_PAGE_LOCALE_CODES) {
          const chunk = refreshData.locales?.[code]
          if (chunk?.hero) next[code] = chunk
        }
        return next
      })
      setSaveSuccess("About Us page saved successfully.")
      setIsLockedForEditing(true)
    } catch (error) {
      setActiveLanguage("en")
      setSaveError(error instanceof Error ? error.message : "Something went wrong. Please try again.")
    } finally {
      setSaving(false)
    }
  }

  async function handleSaveSection(sectionKey: keyof AboutUsPageFormStateShape) {
    setEnglishValidationTouched(true)
    setSavingSectionKey(sectionKey)
    setSaveSuccess(null)
    setSaveError(null)

    try {
      const payloadLocales = await commitPendingImagesIfAny()
      const res = await fetch("/api/admin/about-us", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ locales: payloadLocales, sectionKey }),
      })
      const data: { success?: boolean; error?: string } = await res.json()
      if (!res.ok || !data.success) throw new Error(data.error ?? "Failed to save section")

      const refreshRes = await fetch("/api/admin/about-us", { credentials: "include" })
      const refreshData: { success?: boolean; error?: string; locales?: Partial<Record<Language, AboutUsPageFormStateShape>> } = await refreshRes.json()
      if (!refreshRes.ok || !refreshData.success) {
        throw new Error(refreshData.error ?? "Section saved, but failed to refresh latest data.")
      }
      setFormByLanguage((prev) => {
        const next = { ...prev }
        for (const code of ABOUT_US_PAGE_LOCALE_CODES) {
          const chunk = refreshData.locales?.[code]
          if (chunk?.hero) next[code] = chunk
        }
        return next
      })
      setSaveSuccess(`${String(sectionKey)} section saved successfully.`)
      showSectionFeedback(sectionKey, "success", "Section saved successfully.")
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Something went wrong. Please try again."
      setActiveLanguage("en")
      setSaveError(errorMessage)
      showSectionFeedback(sectionKey, "error", errorMessage)
    } finally {
      setSavingSectionKey(null)
    }
  }

  function renderSectionSaveButton(sectionKey: keyof AboutUsPageFormStateShape) {
    const isSavingThisSection = savingSectionKey === sectionKey
    const feedback = sectionFeedback[sectionKey]
    return (
      <div className="flex flex-col items-end gap-2">
        <button
          type="button"
          onClick={() => void handleSaveSection(sectionKey)}
          disabled={isFormLocked}
          className="flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold font-sans text-white transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          style={{ background: "var(--brand-navy)" }}
        >
          {isSavingThisSection ? (
            <>
              <Loader2 className="w-3.5 h-3.5 animate-spin" aria-hidden="true" />
              Saving section...
            </>
          ) : (
            <>
              <Save className="w-3.5 h-3.5" aria-hidden="true" />
              Save Section
            </>
          )}
        </button>
        {feedback ? (
          <div
            className="text-xs font-sans px-3 py-1.5 rounded-lg border max-w-[420px]"
            style={
              feedback.type === "success"
                ? { background: "rgba(43,182,115,0.08)", borderColor: "rgba(43,182,115,0.30)", color: "var(--brand-green)" }
                : { background: "rgba(239,68,68,0.08)", borderColor: "rgba(239,68,68,0.30)", color: "#dc2626" }
            }
            role="alert"
          >
            {feedback.message}
          </div>
        ) : null}
      </div>
    )
  }

  return (
    <div className="flex flex-col gap-6">
      {loadError && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{ background: "rgba(239,68,68,0.06)", borderColor: "rgba(239,68,68,0.30)", color: "#dc2626" }}
          role="alert"
        >
          <AlertCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {loadError}
        </div>
      )}
      {/* Language Tabs */}
      <div
        className="bg-card rounded-2xl border border-border overflow-hidden"
        role="tabpanel"
        id={`language-panel-${activeLanguage}`}
        aria-labelledby={`language-tab-${activeLanguage}`}
      >
        <div
          className="flex items-center gap-2 px-6 py-3 border-b border-border"
          style={{ background: "rgba(29,45,104,0.02)" }}
        >
          <div
            className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 text-sm"
            style={{ background: "rgba(29,45,104,0.08)" }}
            aria-hidden="true"
          >
            🌐
          </div>
          <div>
            <p className="text-sm font-bold font-sans" style={{ color: "var(--brand-navy)" }}>
              Page Language
            </p>
            <p className="text-xs text-muted-foreground font-sans leading-none mt-0.5">
              Choose which language version to edit
            </p>
          </div>
        </div>
        <div className="px-6 py-4">
          <LanguageTabs
            activeLanguage={activeLanguage}
            onChange={(language) => {
              if (isFormLocked) return
              setActiveLanguage(language)
            }}
            disabled={isFormLocked}
          />
        </div>
      </div>

      {/* ── Section 1 — Hero ── */}
      <Section
        id="section-hero"
        icon={<Sparkles className="w-4 h-4" />}
        title="Hero Section"
        description="Main headline, description, quick stats, and hero image"
        accent="navy"
        footer={renderSectionSaveButton("hero")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <HeroSection
            value={formByLanguage[activeLanguage].hero}
            onChange={(v) => updateSection("hero", v)}
            isDefaultLanguage={activeLanguage === "en"}
            defaultImageUrl={formByLanguage.en.hero.image || undefined}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().hero
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 2 — Mission ── */}
      <Section
        id="section-mission"
        icon={<Target className="w-4 h-4" />}
        title="Mission Section"
        description="Eyebrow, title, description, mission stats, and feature cards"
        accent="green"
        footer={renderSectionSaveButton("mission")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <MissionSection
            value={formByLanguage[activeLanguage].mission}
            onChange={(v) => updateSection("mission", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().mission
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 3 — Trust ── */}
      <Section
        id="section-trust"
        icon={<ShieldCheck className="w-4 h-4" />}
        title="Trust Section"
        description="Since text, trusted text, and trust statistics"
        accent="navy"
        footer={renderSectionSaveButton("trust")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <TrustSection
            value={formByLanguage[activeLanguage].trust}
            onChange={(v) => updateSection("trust", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().trust
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 4 — Impact ── */}
      <Section
        id="section-impact"
        icon={<TrendingUp className="w-4 h-4" />}
        title="Impact Section"
        description="Section title and impact statistics items"
        accent="green"
        footer={renderSectionSaveButton("impact")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <ImpactSection
            value={formByLanguage[activeLanguage].impact}
            onChange={(v) => updateSection("impact", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().impact
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 5 — Core Values ── */}
      <Section
        id="section-core-values"
        icon={<Heart className="w-4 h-4" />}
        title="Core Values Section"
        description="Eyebrow, title, subtitle, and values with icons"
        accent="navy"
        footer={renderSectionSaveButton("coreValues")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <CoreValuesSection
            value={formByLanguage[activeLanguage].coreValues}
            onChange={(v) => updateSection("coreValues", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().coreValues
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 6 — History ── */}
      <Section
        id="section-history"
        icon={<Clock className="w-4 h-4" />}
        title="History Section (Timeline)"
        description="Eyebrow, title, subtitle, and chronological milestone items"
        accent="green"
        footer={renderSectionSaveButton("history")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <HistorySection
            value={formByLanguage[activeLanguage].history}
            onChange={(v) => updateSection("history", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().history
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Section 7 — CTA ── */}
      <Section
        id="section-cta"
        icon={<Megaphone className="w-4 h-4" />}
        title="CTA Section"
        description="Eyebrow, title, subtitle, and primary / secondary buttons"
        accent="navy"
        footer={renderSectionSaveButton("cta")}
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading...</p>
        ) : (
          <CTASection
            value={formByLanguage[activeLanguage].cta}
            onChange={(v) => updateSection("cta", v)}
            validation={
              activeLanguage === "en" && englishValidationTouched
                ? getEnglishValidationErrors().cta
                : undefined
            }
          />
        )}
      </Section>

      {/* ── Feedback messages ── */}
      {saveSuccess && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{ background: "rgba(43,182,115,0.08)", borderColor: "rgba(43,182,115,0.30)", color: "var(--brand-green)" }}
          role="alert"
        >
          <CheckCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {saveSuccess}
        </div>
      )}
      {saveError && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{ background: "rgba(239,68,68,0.06)", borderColor: "rgba(239,68,68,0.30)", color: "#dc2626" }}
          role="alert"
        >
          <AlertCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {saveError}
        </div>
      )}

      {/* ── Save button ── */}
      <div className="flex items-center justify-end gap-3 pb-2">
        {isLockedForEditing && (
          <button
            type="button"
            onClick={() => {
              setIsLockedForEditing(false)
              setSaveSuccess(null)
              setSaveError(null)
            }}
            disabled={saving || loading}
            className="flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold font-sans border border-border text-foreground bg-card transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          >
            <Pencil className="w-4 h-4" aria-hidden="true" />
            Edit Page
          </button>
        )}
        <button
          type="button"
          onClick={() => void handleSave()}
          disabled={isFormLocked}
          className="flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold font-sans text-white transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          style={{ background: "var(--brand-navy)" }}
        >
          {saving ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
              Saving...
            </>
          ) : (
            <>
              <Save className="w-4 h-4" aria-hidden="true" />
              Save Changes
            </>
          )}
        </button>
      </div>
    </div>
  )
}