"use client"

import { useEffect, useState } from "react";
import { DataTable } from "./DataTable";
import { columns } from "@/components/admin/footerSections/footerSectionsColumn";

const FooterSectionClient = () => {

  const [footerSections, setFooterSections] = useState<footerSectionType[]>([])

  const fetchFooterSections = async () => {
    const res = await fetch("/api/admin/footerSection", { cache: "no-store" });
    
    const data = await res.json();

    console.log(data)
    setFooterSections(data.footerSections)
  }

  useEffect(()=> {
    fetchFooterSections()
  }, [])

  return (
      <div className="space-y-6 pt-5 px-2">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-semibold tracking-tight">Footer Sections</h1>
        </div>
        <DataTable
          columns={columns}
          data={footerSections}
          searchKey="footer_section"
          // showingRow={7}
          // pagination={10}
        />
      </div>
    );
}


export default FooterSectionClient;