"use client";

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

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

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

      <div className="mt-auto flex items-center text-sm font-medium text-purple-400">
        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>
  );
}
