'use client';

import { useState } from 'react';
import { Story } from '@/data/creative';
import { formatReadingTime } from '@/utils/readingTime';

interface ExpandableStoryProps {
  story: Story;
}

export default function ExpandableStory({ story }: ExpandableStoryProps) {
  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">
            {story.title}
          </h2>
          <div className="text-black font-bold text-lg bg-yellow-200 border-2 border-black px-3 py-1 whitespace-nowrap">
            {isExpanded ? '▼' : '▶'}
          </div>
        </div>
        
        <p className="text-gray-600 italic mb-4">{story.excerpt}</p>
        
        <div className="flex gap-4 text-sm">
          <span className="bg-yellow-200 text-black px-3 py-1 border-2 border-black font-bold">
            {formatReadingTime(story.readTime)} read
          </span>
          <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
            {new Date(story.createdAt).toLocaleDateString('en-US', { 
              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">
              {story.content}
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}