'use client';
import { useState, useRef, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import AnimeRow from './AnimeRow';
import SeasonRow from './SeasonRow';
export default function AnimeDetails({ anime }) {
const [isExpanded, setIsExpanded] = useState(false);
const [activeVideo, setActiveVideo] = useState(null);
const [activeTab, setActiveTab] = useState('synopsis');
const [synopsisOverflows, setSynopsisOverflows] = useState(false);
const synopsisRef = useRef(null);
console.log('AnimeDetails received:', anime);
if (!anime?.info) {
console.error('Invalid anime data structure:', anime);
return null;
}
const { info, moreInfo, relatedAnime, recommendations, seasons } = anime;
const hasCharacters = info.characterVoiceActor?.length > 0 || info.charactersVoiceActors?.length > 0;
const hasVideos = info.promotionalVideos && info.promotionalVideos.length > 0;
// Check if synopsis overflows when component mounts or when content changes
useEffect(() => {
if (synopsisRef.current) {
const element = synopsisRef.current;
setSynopsisOverflows(element.scrollHeight > element.clientHeight);
}
}, [info.description, activeTab]);
// Video modal for promotional videos
const VideoModal = ({ video, onClose }) => {
if (!video) return null;
return (
);
};
// Format status with aired date
const getStatusWithAired = () => {
let status = moreInfo?.status || '';
if (moreInfo?.aired) {
status += ` (${moreInfo.aired})`;
}
return status;
};
return (
{/* Video Modal */}
{activeVideo && setActiveVideo(null)} />}
{/* Background Image with Gradient Overlay */}