'use client';

import React from "react";
import { motion } from "framer-motion";
import { Container, Row, Col, Card } from 'react-bootstrap';
import HeaderTop from "@/components/HeaderTop";
import HeaderSticky from "@/components/HeaderSticky";
import Link from "next/link";
import { unixToDateTime } from "@/lib/function";

type BlogData = {
  sb_id: number;
  sb_title: string;
  sb_content: string;
  sb_path: string;
  sb_date: number;
  sb_photo?: string;
  sb_photo_width?: number;
  sb_photo_height?: number;
};

export default function BlogPostPage({
  post,
  relatedPosts
}: {
  post: BlogData;
  relatedPosts: BlogData[];
}) {

    return (
    <React.Fragment>
        <section className="section-default">
            <HeaderTop />
            <HeaderSticky />
        </section>
        <Container className="py-3 py-md-5">
            <Row className='g-3 g-md-5'>
            <React.Fragment>
                {post && (
                <React.Fragment>

                <Col md={12}>
                    <motion.img src={post.sb_photo} alt={post.sb_title} className="object-fit-cover img-fluid w-100 rounded-3" width={post.sb_photo_width} height={post.sb_photo_height} whileInView={{scale:[1.1,1]}} transition={{duration:2}} />
                </Col>
                  <Col md={12} className="text-center">
                    <motion.h1 className="text-danger fs-2 fw-bold">{post.sb_title}</motion.h1>
                 </Col>
                <Col md={8}>
                    <p className="text-end text-secondary">{unixToDateTime(post.sb_date,'date')}</p>
                    <div dangerouslySetInnerHTML={{ __html: post.sb_content }} />
                </Col>
                </React.Fragment>
                )}
            </React.Fragment>
            <Col md={4}>
                <Card className="bg-light h-100">
                    <Card.Body className="overflow-hidden">
                        <Card.Title>You might be interested in…</Card.Title>

{relatedPosts
  .sort((a, b) => b.sb_date - a.sb_date) // latest first
  .slice(0, 10) // show only 10 blogs
  .map((data, index) => (
    <Link
      href={`/blog/${data.sb_path}`}
      className="d-flex align-items-start mb-3"
      key={index}
    >
      <motion.img
        src={data.sb_photo}
        alt={data.sb_title}
        className="img-fluid rounded-2"
        width={data.sb_photo_width}
        height={data.sb_photo_height}
        style={{ maxWidth: "100px" }}
        whileInView={{ scale: [0.5, 1] }}
        transition={{ duration: 2 }}
      />

      <motion.div className="ms-2 fs-small">
        <div>{data.sb_title}</div>
        <div className="text-secondary">
          {unixToDateTime(data.sb_date, "date")}
        </div>
      </motion.div>
    </Link>
))}
                    </Card.Body>
                </Card>
            </Col>
            </Row>
        </Container>

        <Container className="py-3 py-md-5 text-center">
            <h2 className="display-3 fw-bold text-danger mb-4">Ready to secure your next examination?</h2>
            <p>Contact Vensysco today to learn how AI surveillance can safeguard your assessments.</p>
            <motion.a href="/contact-us" className="btn btn-lg btn-outline-danger rounded-pill" whileInView={{y:[50,0]}} transition={{duration:1.8}}>
                Schedule a Demo
            </motion.a>
        </Container>
    </React.Fragment>
    );
}