"use client";

import type { Experience } from "../types";
import { getTypeColor, getTypeIcon } from "./utils";

export function ExperienceCard({
  experience,
  onClick,
}: {
  experience: Experience;
  onClick?: () => void;
}) {
  const isClickable = !!(
    experience.learned_at ||
    experience.learned_from ||
    experience.learned_because
  );

  return (
    <div
      onClick={isClickable ? onClick : undefined}
      className={`group mx-auto flex w-full max-w-[20rem] items-center gap-3 rounded-lg border border-white/10 bg-gradient-to-br from-white/5 to-white/2 p-3 backdrop-blur-sm transition-all duration-200 sm:max-w-none ${
        isClickable
          ? "cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5"
          : ""
      }`}
    >
      <div
        className={`text-2xl p-2 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 relative ${
          experience.image ? "w-10 h-10" : ""
        }`}
      >
        {experience.image ? (
          <img
            src={experience.image}
            alt={experience.name}
            className="w-full h-full object-contain"
          />
        ) : (
          getTypeIcon(experience.type)
        )}
        {isClickable && (
          <div className="absolute -top-1 -right-1 w-3 h-3 bg-purple-500 rounded-full border-2 border-black animate-pulse" />
        )}
      </div>
      <div className="flex-1 min-w-0">
        <h4
          className={`text-base font-semibold text-white transition-colors ${
            isClickable ? "group-hover:text-purple-400" : ""
          }`}
        >
          {experience.name}
        </h4>
        {experience.description && (
          <p className="text-xs text-gray-400 mt-0.5 line-clamp-1">
            {experience.description}
          </p>
        )}
      </div>
      {isClickable && (
        <div className="text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
          <svg
            className="w-4 h-4"
            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>
  );
}
