import React from 'react'
import { Link } from 'react-router-dom'
import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
import type { Article } from '../data/site'
import { formatJalali } from '../utils/date'
import { useLang } from '../i18n/lang'
import { toPersianDigits } from '../utils/digits'

export function ArticleCard({ article }: { article: Article }) {
  const { t, href } = useLang()
  return (
    <Link
      to={href(`/blog/${article.slug}`)}
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-white/10 bg-char/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.18)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
      aria-label={`${t('readArticlePrefix')} ${article.title}`}
    >
      <div className="relative overflow-hidden">
        <img
          src={article.image}
          alt={`${t('articleImagePrefix')} ${article.title}`}
          className="h-52 w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
        />
        {/* برچسب دسته‌بندی کپسولی شیشه‌ای روی تصویر */}
        <div className="absolute top-4 ltr:left-4 rtl:right-4 rounded-full border border-white/20 bg-ink/75 px-3.5 py-1 text-xs font-light text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)]">
          {article.category}
        </div>
      </div>
      
      <div className="flex flex-1 flex-col p-7">
        <h3 className="text-lg font-bold leading-8 text-ivory transition-colors duration-300 group-hover:text-copper">
          {article.title}
        </h3>
        
        <p className="mt-3 mb-8 text-sm font-light leading-7 text-ivory/60 line-clamp-3">
          {article.excerpt}
        </p>
        
        <div className="mt-auto flex items-center justify-between border-t border-white/10 pt-5 text-xs font-light text-ivory/50">
          <span className="flex items-center gap-3">
            <span>{formatJalali(article.date)}</span>
            <span className="flex items-center gap-1.5">
              <ClockIcon className="h-3.5 w-3.5 text-copper/80" />
              {toPersianDigits(article.read)}
            </span>
          </span>

          {/* دکمه کپسولی ادامه مطلب با افکت شیشه‌ای */}
          <span className="inline-flex items-center gap-2 rounded-full border border-copper/40 bg-copper/5 px-3.5 py-1.5 text-xs font-medium text-copper backdrop-blur-md shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_15px_rgba(197,143,92,0.5)]">
            {t('readMore')}
            <ArrowLeftIcon className="h-3.5 w-3.5 ltr:-scale-x-100 transition-transform duration-300 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
          </span>
        </div>
      </div>
    </Link>
  )
}