import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Post } from '@/types/types';
import { Calendar, User, ArrowRight } from 'lucide-react';

interface FeaturedPostProps {
  post: Post;
}

export function FeaturedPost({ post }: FeaturedPostProps) {
  // Formatowanie daty
  const dateObj = new Date(post.date);
  const formattedDate = dateObj.toLocaleDateString('pl-PL', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  });

  // Tłumaczenie kategorii
  const categoryLabels: Record<string, string> = {
    'klimatyzacja': 'Klimatyzacja',
    
    'remonty': 'Remonty',
    'hydraulika': 'Hydraulika',
    'porady': 'Porady'
  };

  return (
    <div className="group relative rounded-2xl overflow-hidden bg-white border border-border shadow-sm hover:shadow-lg transition-all duration-300">
      <div className="flex flex-col md:flex-row">
        {/* Obraz */}
        <div className="relative w-full md:w-3/5 aspect-video md:aspect-auto md:min-h-[400px]">
          <Image
            src={post.image || '/images/hero/hero-section-image.webp'}
            alt={post.title}
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute top-4 left-4">
            <span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider shadow-md">
              {categoryLabels[post.category] || post.category}
            </span>
          </div>
        </div>

        {/* Treść */}
        <div className="p-8 md:p-12 flex flex-col justify-center w-full md:w-2/5">
          <div className="flex items-center gap-4 text-text-muted text-sm font-medium mb-4">
            <div className="flex items-center gap-1.5">
              <Calendar className="w-4 h-4 text-primary/60" />
              <span>{formattedDate}</span>
            </div>
            {post.author && (
              <div className="flex items-center gap-1.5">
                <User className="w-4 h-4 text-primary/60" />
                <span>{post.author}</span>
              </div>
            )}
          </div>

          <h3 className="text-2xl md:text-3xl font-extrabold text-primary font-heading leading-tight mb-4 group-hover:text-accent transition-colors">
            <Link href={`/blog/${post.slug}`} className="before:absolute before:inset-0">
              {post.title}
            </Link>
          </h3>

          <p className="text-text-muted leading-relaxed mb-8 line-clamp-3">
            {post.excerpt}
          </p>

          <div className="flex items-center gap-2 text-primary font-semibold group-hover:text-accent transition-colors mt-auto">
            <span>Czytaj pełny artykuł</span>
            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </div>
        </div>
      </div>
    </div>
  );
}