Untitled

"use client";
import ImageHeader from "@/components/imageHeader";
import { useEffect, useState } from "react";
import { IoChevronForwardOutline, IoHome } from "react-icons/io5";

export default function N219Training() {
  const [data, setData] = useState({ id: "", title: "", content: "" });
  const contentId = 3;

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          `http://localhost:5000/api/content/${contentId}`
        );
        const jsonData = await response.json();
        console.log(jsonData);
        setData(jsonData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    }
    fetchData();
  }, [contentId]);

  return (
    <div>
      <ImageHeader />
      <div>
        <nav
          className="flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50"
          aria-label="Breadcrumb"
        >
          <ol className="inline-flex items-center space-x-1 md:space-x-3">
            <li className="inline-flex items-center">
              <a
                href="#"
                className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-700"
              >
                <IoHome className="w-3 h-3 mr-2.5" />
                Home
              </a>
            </li>
            <li aria-current="page">
              <div className="flex items-center">
                <IoChevronForwardOutline className="w-4 h-4 mx-1 text-gray-400" />
                <span className="ml-1 text-sm font-medium text-gray-500 md:ml-2">
                  Training
                </span>
              </div>
            </li>
            <li aria-current="page">
              <div className="flex items-center">
                <IoChevronForwardOutline className="w-4 h-4 mx-1 text-gray-400" />
                <span className="ml-1 text-sm font-medium text-gray-500 md:ml-2">
                  Training Detail
                </span>
              </div>
            </li>
          </ol>
        </nav>
      </div>

      {/* Content */}
      <div className="relative min-h-screen bg-gradient-to-r from-blue-900 to-blue-600 p-4 md:p-8">
        <div className="flex px-2 pb-4 pt-8 md:px-8">
          <div className="text-3xl font-bold text-gray-200 border-b-4 border-pink-600 mb-4">
            {data.title}
          </div>
        </div>
        <div className="flex flex-col p-8 bg-sky-100 rounded-md mx-2 md:mx-8">
          <div>
            <div
              className="mb-2 space-y-2 list-outside list-disc"
              dangerouslySetInnerHTML={{ __html: data.content }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
}