import React from 'react';
import { Article, Category } from '../types';
import { ArrowRight, Clock } from 'lucide-react';

interface ArticleCardProps {
  article: Article;
}

const getCategoryLabel = (category: Category) => {
  switch (category) {
    case 'FEMINIST_GUNDEM': return 'Feminist Gündem';
    case 'CEVIRI': return 'Çeviri';
    case 'KADINLARDAN_GELENLER': return 'Kadınlardan Gelenler';
    case 'CADI_YAYINLARI': return 'Cadı Yayınları';
    default: return 'Genel';
  }
};

const getCategoryColor = (category: Category) => {
  switch (category) {
    case 'FEMINIST_GUNDEM': return 'bg-brand-red text-white';
    case 'CEVIRI': return 'bg-brand-purple text-white';
    case 'KADINLARDAN_GELENLER': return 'bg-brand-purpleLighter text-brand-purple';
    default: return 'bg-gray-200 text-gray-800';
  }
};

export const ArticleCard: React.FC<ArticleCardProps> = ({ article }) => {
  return (
    <div className="group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-[0_10px_40px_rgba(84,25,139,0.15)] transition-all duration-300 transform hover:-translate-y-1 flex flex-col h-full border border-gray-100">
      {/* Image Container */}
      <div className="relative h-56 overflow-hidden">
        <img 
          src={article.imageUrl} 
          alt={article.title}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute top-4 left-4">
          <span className={`px-3 py-1 rounded-md text-xs font-bold tracking-wider uppercase ${getCategoryColor(article.category)}`}>
            {getCategoryLabel(article.category)}
          </span>
        </div>
      </div>

      {/* Content */}
      <div className="p-6 flex flex-col flex-grow">
        <div className="flex items-center text-xs text-brand-textSecondary mb-3 space-x-3">
          <span className="font-medium text-brand-purple">{article.author}</span>
          <span className="w-1 h-1 rounded-full bg-gray-300"></span>
          <span>{article.date}</span>
          {article.readTime && (
            <>
              <span className="w-1 h-1 rounded-full bg-gray-300"></span>
              <span className="flex items-center">
                <Clock size={12} className="mr-1" />
                {article.readTime}
              </span>
            </>
          )}
        </div>

        <h3 className="text-xl font-bold text-brand-text mb-3 leading-tight group-hover:text-brand-purple transition-colors font-display">
          {article.title}
        </h3>
        
        <p className="text-brand-textSecondary text-sm leading-relaxed mb-6 line-clamp-3">
          {article.excerpt}
        </p>

        <div className="mt-auto pt-4 border-t border-gray-100 flex items-center justify-between">
          <button className="text-sm font-semibold text-brand-purple flex items-center group/btn">
            Devamını Oku
            <ArrowRight size={16} className="ml-2 transform group-hover/btn:translate-x-1 transition-transform" />
          </button>
        </div>
      </div>
    </div>
  );
};