import React from 'react'
import { Link } from 'react-router-dom'

export function ProjectCard({ project }: any) {
  const isOngoing = project.status === 'progress'
  
  const statusText = isOngoing ? 'در حال انجام' : 'انجام شده'
  
  const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
  const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'

  return (
    <article className="group flex h-full flex-col overflow-hidden border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
      <Link to={`/projects/${project.slug || '#'}`} className="flex h-full flex-col focus:outline-none">
        
        <div className="relative aspect-[4/3] w-full overflow-hidden">
          <img
            src={project.image}
            alt={project.title}
            className="h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
          />
          <div className={`absolute right-4 top-4 flex items-center gap-2 bg-ink/85 px-4 py-2 text-xs font-light backdrop-blur-md ${textColor}`}>
            <span className={`h-1.5 w-1.5 rounded-full ${dotColor}`} />
            {statusText}
          </div>
        </div>

        <div className="flex flex-1 flex-col p-8">
          
          <div className="text-center">
            <h3 className="font-pinar text-xl font-bold text-ivory">
              {project.title}
            </h3>
            <p className="mt-7 text-sm font-light text-ivory/60">
              {project.location}
            </p>
          </div>

          <div className="my-7 h-px w-full bg-ivory/10" />

          <div className="mt-auto flex items-center justify-between text-sm font-light text-ivory/60">
            <span>سال: {project.year}</span>
            <span>{project.area} متر مربع</span>
          </div>

        </div>
      </Link>
    </article>
  )
}