'use client';

import { useEffect, useState } from 'react';


export default function OverviewClient() {
  const [overviewData, setOverviewData] =
    useState<footerSectionType | null>(null);

  const fetchOverviewData = async () => {
    try {
      const res = await fetch('/api/footerSection/overview', {
        cache: 'no-store',
      });

      if (!res.ok) throw new Error('Fetch failed');

      const data = await res.json();

     // console.log(data)

      setOverviewData(data ?? null);
    } catch (error) {
      //console.error(error);
    }
  };

  useEffect(() => {
    fetchOverviewData();
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
      
      <header className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-500 opacity-95" />
        <div className="relative max-w-6xl mx-auto px-6 py-20 text-center text-white">
          <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight">
            Product Overview
          </h1>
          <p className="mt-4 text-lg md:text-xl text-green-100 max-w-2xl mx-auto">
            Discover what makes Barrack Store your trusted shopping destination
          </p>
        </div>
      </header>

      <main className="relative -mt-16 pb-20">
        <div className="max-w-6xl mx-auto px-6">
          <div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 transition-all duration-300 hover:shadow-2xl">
            
            {overviewData ? (
              <div
                className="prose prose-lg max-w-none prose-headings:text-gray-800 prose-p:text-gray-600 prose-a:text-green-600"
                dangerouslySetInnerHTML={{
                  __html: overviewData.description,
                }}
              />
            ) : (
              <div className="space-y-4 animate-pulse">
                <div className="h-6 bg-gray-200 rounded w-1/3" />
                <div className="h-4 bg-gray-200 rounded w-full" />
                <div className="h-4 bg-gray-200 rounded w-5/6" />
                <div className="h-4 bg-gray-200 rounded w-2/3" />
              </div>
            )}

          </div>
        </div>
      </main>

    </div>
  );
}