'use client';

import Image from 'next/image';
import { CalendarDays, User } from 'lucide-react';
import Link from 'next/link';

const ArticleCard = ({ article }) => {
  let imageUrl = null;

  if (article.image) {
    if (article.image.startsWith('/')) {
      imageUrl = `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${article.image.replace(/^\/+/, "")}`;
    } else {
      imageUrl = `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${article.image}`;
    }
  }

  const categoryColor =
    article.category?.name?.toLowerCase() === 'consulting'
      ? 'bg-gradient-to-r from-teal-600 to-blue-500'
      : 'bg-gradient-to-r from-teal-600 to-blue-500';

  return (
    <div className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100">
      {/* Image Section */}
      <div className="relative w-full h-56">
        <Image
          src={imageUrl || "/assets/default-article.webp"}
          alt={article.title || "Article image"}
          fill
          className="object-contain group-hover:scale-105 transition-transform duration-500"
        />

        {article.category?.name && (
          <span
            className={`${categoryColor} text-white text-xs px-3 py-1 rounded-full absolute bottom-3 left-3 font-medium`}
          >
            {article.category.name}
          </span>
        )}
      </div>

      {/* Content */}
      <div className="p-5">
        <div className="flex items-center text-gray-500 text-xs gap-4 mb-3">
          <span className="flex items-center gap-1">
            <User size={14} /> {article.author || 'By admin'}
          </span>
          {article.created_at && (
            <span className="flex items-center gap-1">
              <CalendarDays size={14} />{' '}
              {new Date(article.created_at).toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'long',
                year: 'numeric',
              })}
            </span>
          )}
        </div>

        <Link href={`/${article.slug}`}>
          <h3 className="text-lg font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-teal-600 transition-colors duration-300">
            {article.title}
          </h3>
        </Link>

        <Link href={`/${article.slug}`}>
          <button className="text-teal-600 hover:text-teal-700 font-medium text-sm flex items-center gap-1 group/btn transition-colors duration-300">
            Read the article
            <svg className="w-4 h-4 transform group-hover/btn:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </button>
        </Link>
      </div>
    </div>
  );
};

export default ArticleCard;