"use client";
import Link from "next/link";
import Image from "next/image";
import { BlogPost } from "@/lib/blog";

interface FeaturedBlogProps {
    posts: BlogPost[];
}

const CalendarIcon = () => (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
        <line x1="16" y1="2" x2="16" y2="6" />
        <line x1="8" y1="2" x2="8" y2="6" />
        <line x1="3" y1="10" x2="21" y2="10" />
    </svg>
);

const ArrowRightIcon = () => (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <line x1="5" y1="12" x2="19" y2="12" />
        <polyline points="12 5 19 12 12 19" />
    </svg>
);

export default function FeaturedBlog({ posts }: FeaturedBlogProps) {
    if (!posts || posts.length === 0) {
        return null;
    }

    return (
        <section className="py-20 bg-gray-900">
            <div className="max-w-6xl mx-auto px-4">
                <div className="text-center mb-12">
                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                        Najnowsze wpisy z bloga
                    </h2>
                    <p className="text-gray-400 text-lg">
                        Dowiedz się więcej o AI, automatyzacji i innowacjach technologicznych
                    </p>
                </div>

                <div className="grid md:grid-cols-3 gap-8 mb-12">
                    {posts.slice(0, 3).map((post) => (
                        <Link
                            key={post.slug}
                            href={`/blog/${post.slug}`}
                            className="group bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-cyan-500 transition-all duration-300"
                        >
                            <div className="aspect-video overflow-hidden bg-gray-700 relative">
                                <Image
                                    src={post.coverImage || '/blog/ai-automation.jpg'}
                                    alt={post.title}
                                    fill
                                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                                    sizes="(max-width: 768px) 100vw, 33vw"
                                />
                            </div>
                            <div className="p-6">
                                <div className="flex items-center gap-2 text-sm text-gray-400 mb-3">
                                    <CalendarIcon />
                                    {new Date(post.publishedAt).toLocaleDateString("pl-PL", {
                                        year: "numeric",
                                        month: "long",
                                        day: "numeric",
                                    })}
                                </div>
                                <h3 className="text-xl font-bold text-white mb-2 group-hover:text-cyan-400 transition-colors">
                                    {post.title}
                                </h3>
                                <p className="text-gray-400 text-sm line-clamp-2 mb-4">
                                    {post.excerpt}
                                </p>
                                <div className="flex items-center text-cyan-400 text-sm font-medium">
                                    Czytaj więcej
                                    <span className="ml-2 group-hover:translate-x-1 transition-transform inline-block">
                                        <ArrowRightIcon />
                                    </span>
                                </div>
                            </div>
                        </Link>
                    ))}
                </div>

                <div className="text-center">
                    <Link
                        href="/blog"
                        className="inline-flex items-center gap-2 px-6 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-medium rounded-lg transition-colors"
                    >
                        Zobacz wszystkie wpisy
                        <ArrowRightIcon />
                    </Link>
                </div>
            </div>
        </section>
    );
}