import type { BlogPost } from "@/lib/blog-api";
import Image from "next/image";
import Link from "next/link";
import { CalendarDays, User, ArrowRight } from "lucide-react";

interface FeaturedPostProps {
  post: BlogPost;
}

export default function FeaturedPost({ post }: FeaturedPostProps) {
  return (
    <div className="bg-white rounded-xl overflow-hidden shadow-lg">
      <div className="grid grid-cols-1 lg:grid-cols-2">
        <div className="relative aspect-[4/3] lg:aspect-auto">
          <Image
            src={
              post.backgroundImage || "/placeholder.svg?height=600&width=800"
            }
            alt={post.title}
            fill
            className="object-cover"
            priority
          />
          <div className="absolute top-4 left-4">
            <span className="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-full">
              Featured
            </span>
          </div>
        </div>

        <div className="p-6 md:p-8 lg:p-10 flex flex-col">
          <div className="flex items-center space-x-4 mb-4">
            <span className="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm font-medium">
              {post.category}
            </span>
            <span className="text-gray-500 flex items-center text-sm">
              <CalendarDays className="h-4 w-4 mr-1" />
              {post.author.date}
            </span>
          </div>

          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
            {post.title}
          </h2>

          <p className="text-gray-600 mb-6 flex-grow">{post.description}</p>

          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full overflow-hidden mr-3 bg-gray-200">
                {post.author.avatar ? (
                  <Image
                    src={post.author.avatar || "/placeholder.svg"}
                    alt={post.author.name}
                    width={40}
                    height={40}
                    className="object-cover w-full h-full"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center bg-red-100 text-red-600">
                    <User className="h-5 w-5" />
                  </div>
                )}
              </div>
              <span className="text-gray-700">omicron</span>
            </div>

            <Link
              href={`/blogs/${post.id}`}
              className="inline-flex items-center text-red-600 hover:text-red-700 font-medium"
            >
              Read Article
              <ArrowRight className="h-4 w-4 ml-2" />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}