"use client";

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

export function ExperienceModal({
  experience,
  onClose,
}: {
  experience: Experience;
  onClose: () => void;
}) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in"
      onClick={onClose}
    >
      <div
        className="relative max-w-2xl w-full max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border border-purple-500/30 rounded-2xl shadow-2xl animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>

        {/* Content */}
        <div className="p-8 space-y-6">
          <div className="flex items-center gap-4">
            <div
              className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
            >
              {experience.image ? (
                <img
                  src={experience.image}
                  alt={experience.name}
                  className="w-full h-full object-contain"
                />
              ) : (
                getTypeIcon(experience.type)
              )}
            </div>
            <div>
              <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
                {experience.name}
              </h2>
              <p className="text-sm text-gray-400 mt-1">
                {getTypeIcon(experience.type)}{" "}
                {experience.type.charAt(0).toUpperCase() +
                  experience.type.slice(1)}
              </p>
            </div>
          </div>

          <div className="space-y-4">
            {experience.description && (
              <div>
                <h3 className="text-lg font-semibold text-purple-400 mb-2">
                  Description
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {experience.description}
                </p>
              </div>
            )}

            {experience.learned_at && (
              <div>
                <h3 className="text-lg font-semibold text-purple-400 mb-2">
                  📅 When I Learned It
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {experience.learned_at}
                </p>
              </div>
            )}

            {experience.learned_from && (
              <div>
                <h3 className="text-lg font-semibold text-purple-400 mb-2">
                  👨‍🏫 How I Learned It
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {experience.learned_from}
                </p>
              </div>
            )}

            {experience.learned_because && (
              <div>
                <h3 className="text-lg font-semibold text-purple-400 mb-2">
                  💡 Why I Learned It
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  {experience.learned_because}
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}