"use client";
import { Col, Container, Row } from "react-bootstrap";
import styles from "@/styles/Component/Blog/Blog.module.scss";
import { SuspenseLoader } from "@/components/App/Loader";
import useFetchData from "@/components/App/useFetchData";
 
interface CmsComponentProps {
  slug: string;
}
 
function CmsComponent({ slug }: CmsComponentProps) {
  const { data, isLoading } = useFetchData<{
    name: string;
    description: string;
  }>("CMS", { slug: slug });
 
  if (isLoading) return <SuspenseLoader />;
  return (
    <div className={styles.BlogBlock}>
      <Container className="bigContainer">
        <h1>{data?.name}</h1>
        <Row>
          <Col md={12} lg={12} xl={12}>
            <div className={styles.BlogRightInfo}>
              <div
                className={styles.BlogInfoCardDetail}
                dangerouslySetInnerHTML={{ __html: data?.description }}
              ></div>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
}
 
export default CmsComponent;