"use client";
import { Col, Container, Image, Row } from "react-bootstrap";
import styles from "@/styles/Component/Blog/Blog.module.scss";
import { useParams } from "next/navigation";
import { formatDate } from "@/utils/helpers";
import { SuspenseLoader } from "@/components/App/Loader";
import useFetchData from "@/components/App/useFetchData";

interface BlogDetailResponse {
  id: number;
  title: string;
  name: string;
  content_type: string | null;
  slug: string;
  short_descriptioin: string | null;
  meta_title: string;
  meta_keyword: string;
  meta_description: string;
  description: string;
  cover_letter: string;
  status: string;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

function BlogDetail() {
  const params = useParams();
  const { data, isLoading } = useFetchData<BlogDetailResponse>("BLOG_DETAIL", {
    id: params.id
  });

  if (isLoading) return <SuspenseLoader />;
  return (
    <div className={styles.BlogBlock}>
      <Container className="bigContainer">
        <h1>Blog Detail</h1>
        <Row>
          {/* <Col md={4} lg={4} xl={3}> */}
          {/* <div className={styles.BlogLeftInfo}> */}
          {/*   <div className={styles.BlogSearchCard}>
                <h4>Search The Blog</h4>
                <Form.Control
                  type="text"
                  className={styles.ContactInput}
                  placeholder="Search …"
                  onChange={e => setSearch(e.target.value)}
                />
              </div> */}
          {/* <div className={styles.BlogSearchCard}>
                <h4>Categories</h4>
                <ul className={styles.BlogLinks}>
                  <li>
                    <a href="#">Blog</a>
                  </li>
                  <li>
                    <a href="#">Car Buyer</a>
                  </li>
                  <li>
                    <a href="#">Car Valuation</a>
                  </li>
                  <li>
                    <a href="#">Services</a>
                  </li>
                </ul>
              </div>*/}
          {/* </div> */}
          {/* </Col> */}
          <Col md={12} lg={12} xl={12}>
            <div className={styles.BlogRightInfo}>
              <div className={styles.BlogInfoCardDetail}>
                <span className={styles.dateTag}>
                  <i>
                    <Image src="../assets/icon07.png" alt="icon07" />
                  </i>
                  {formatDate(data?.created_at)}
                </span>
                <h2>{data?.title}</h2>
              </div>
              <div
                className={styles.BlogInfoCardDetail}
                dangerouslySetInnerHTML={{ __html: data?.description }}
              ></div>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default BlogDetail;