"use client"

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowLeft, Calendar, User } from "lucide-react";

export default function BlogDetailClient({ blog }) {
  return (
    <div className="pt-20">
      <article className="py-16">
        <div className="container px-4 max-w-3xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Link
              href="/blogs"
              className="inline-flex items-center text-primary hover:underline mb-8"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Updates
            </Link>

            {blog.image && (
              <div className="aspect-video w-full rounded-xl overflow-hidden mb-8">
                <img
                  src={blog.image}
                  alt={blog.title}
                  className="w-full h-full object-cover"
                />
              </div>
            )}

            <h1 className="text-3xl md:text-4xl font-bold mb-4">
              {blog.title}
            </h1>

            <div className="flex items-center gap-4 text-sm text-muted-foreground mb-8 pb-8 border-b">
              <div className="flex items-center gap-1">
                <User size={14} />
                <span>{blog.author}</span>
              </div>
              <div className="flex items-center gap-1">
                <Calendar size={14} />
                <span>{blog.date}</span>
              </div>
            </div>

            <div
              className="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-primary prose-strong:text-foreground"
              dangerouslySetInnerHTML={{ __html: blog.content }}
            />
          </motion.div>
        </div>
      </article>
    </div>
  );
}
