import { useRouter } from 'next/router';
import { motion } from 'framer-motion';
import devlogData from '../../data/devlog.json';
import Image from 'next/image';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;
  const blog = devlogData.find((entry) => entry.slug === slug);

  if (!blog) {
    return (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="py-20 text-center"
      >
        <h1 className="text-4xl font-bold mb-6">Beitrag nicht gefunden</h1>
        <p className="text-xl text-gray-600">Der angeforderte Beitrag existiert nicht.</p>
      </motion.div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="relative p-8 mb-16 before:content-[''] before:absolute before:top-0 before:left-0 before:w-8 before:h-8 before:border-t-2 before:border-l-2 before:border-pb-turquoise after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-8 after:h-8 after:border-b-2 after:border-r-2 after:border-pb-turquoise"
          >
            <h1 className="text-4xl font-bold mb-6">{blog.title}</h1>
            <p className="text-xl text-gray-600 mb-4">{blog.date}</p>
          </motion.div>

          <div className="space-y-8">
            {blog.content && blog.content.map((item, index) =>
              item.type === 'text' ? (
                <p key={index} className="text-gray-600 text-lg">
                  {item.value}
                </p>
              ) : (
                <div
                  key={index}
                  className="relative w-full h-64 rounded-lg overflow-hidden"
                >
                  <Image
                    src={item.value}
                    alt={blog.title}
                    fill
                    className="object-cover"
                  />
                </div>
              )
            )}
          </div>
        </div>
      </section>
    </motion.div>
  );
}
