"use client";

import type { MiniProject } from "../types";

export function MiniProjectCard({
  project,
  onClick,
}: {
  project: MiniProject;
  onClick: () => void;
}) {
  return (
    <div
      onClick={onClick}
      className="group cursor-pointer relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
    >
      {project.image && (
        <div className="mb-4 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center">
          <img
            src={project.image}
            alt={project.title}
            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
          />
        </div>
      )}

      <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
        {project.title}
      </h3>
      <p className="text-gray-400 text-sm line-clamp-2 mb-4">
        {project.description}
      </p>
      {project.last_commit && (
        <p className="text-gray-400 text-xs mb-2">
          Last commit: {new Date(project.last_commit).toLocaleDateString()}
        </p>
      )}

      <div className="flex items-center text-purple-400 text-sm font-medium mt-auto">
        Click to learn more
        <svg
          className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M9 5l7 7-7 7"
          />
        </svg>
      </div>
    </div>
  );
}
