"use client";

import React, { useEffect, useState } from "react";
import styles from "./read-news.module.scss";

interface NewsItem {
  id?: number;
  title: string;
  intro: string;
  content: string;
  category: string;
  createdAt: string | Date;
}

interface ReadNewsModalProps {
  closeModal: () => void;
  news: NewsItem;
}

const ReadNewsModal: React.FC<ReadNewsModalProps> = ({ closeModal, news }) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Trigger fade-in animation on mount
    const timer = setTimeout(() => setVisible(true), 50);
    return () => clearTimeout(timer);
  }, []);

  if (!news) return null;

  const { title, intro, createdAt, content, category } = news;

  const formattedDate = createdAt
    ? new Date(createdAt).toLocaleDateString(undefined, {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    : "N/A";

  return (
    <div className={`${styles.read} ${visible ? styles.show : ""}`}>
      <div className={styles.read__content}>
        {/* Close Button */}
        <button
          onClick={closeModal}
          className={styles["read__content--close"]}
          aria-label="Close Modal"
        >
          ✕
        </button>

        {/* Scrollable Content */}
        <div className={styles.read__content__details}>
          <header className={styles.read__content__details__header}>
            <h1>{title || "Untitled News"}</h1>
            <small>Published: {formattedDate}</small>
          </header>

          <p className={styles["read__content__details--type"]}>
            <strong>News Type:&nbsp;</strong>
            {category ? String(category).toUpperCase() : "Uncategorized"}
          </p>

          <p className={styles["read__content__details--type"]}>
            <strong>Introduction:&nbsp;</strong>
            {intro || "No introduction provided."}
          </p>

          <div className={styles["read__content__details--body"]}>
            <strong>Details:&nbsp;</strong>
            <p>{content || "No content available."}</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReadNewsModal;