import React from 'react'
import { Link } from 'react-router-dom'
import { Project } from '../services/projectService'
import ProjectImage from './ProjectImage'

interface ProjectCardProps {
  project: Project
  formatTimeAgo: (dateString: string) => string
}

const ProjectCard: React.FC<ProjectCardProps> = ({ project, formatTimeAgo }) => {
  return (
    <Link
      to={`/projects/${project.id}`}
      className="card overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
    >
      <div className="aspect-video overflow-hidden">
        <ProjectImage
          imagePath={project.product_image}
          alt={project.name}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="p-4">
        <h3 className="font-medium text-secondary-900 mb-1">{project.name}</h3>
        <p className="text-sm text-secondary-600">{formatTimeAgo(project.updated_at)}</p>
        {project.product_name && (
          <p className="text-xs text-secondary-500 mt-1">{project.product_name}</p>
        )}
      </div>
    </Link>
  )
}

export default ProjectCard
