"use client";

import { useState } from "react";
import Link from "next/link";
import { Thought } from "@/data/creative";
import { formatReadingTime } from "@/utils/readingTime";
import Markdown from "react-markdown";

interface ExpandableThoughtProps {
  thought: Thought;
}

const categoryColors = {
  technology: "bg-blue-200",
  life: "bg-green-200",
  creativity: "bg-purple-200",
};

export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
      <div
        className="cursor-pointer"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex justify-between items-start mb-4">
          <h2 className="text-2xl font-bold text-gray-900 uppercase flex-1 pr-4">
            {thought.title}
          </h2>
          <div className="text-black font-bold text-lg bg-teal-200 border-2 border-black px-3 py-1 whitespace-nowrap">
            {isExpanded ? "▼" : "▶"}
          </div>
        </div>

        <p className="text-gray-600 italic mb-4">{thought.excerpt}</p>

        <div className="flex gap-4 text-sm">
          <Link
            href={`/thoughts/${thought.id}`}
            className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold hover:bg-teal-300 transition-colors"
          >
            Read Full Thought
          </Link>
          <span
            className={`${categoryColors[thought.category]} text-black px-3 py-1 border-2 border-black font-bold`}
          >
            {thought.category}
          </span>
          <span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
            {formatReadingTime(thought.readTime)} read
          </span>
          <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
            {new Date(thought.createdAt).toLocaleDateString("en-GB", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </span>
        </div>
      </div>

      <div
        className={`overflow-hidden transition-all duration-500 ease-in-out ${
          isExpanded ? "max-h-[2000px] opacity-100 mt-6" : "max-h-0 opacity-0"
        }`}
      >
        <div className="border-t-2 border-black pt-6">
          <div className="prose prose-lg max-w-none">
            <div className="text-gray-800 leading-relaxed whitespace-pre-line">
              <Markdown>{thought.content}</Markdown>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}