"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-3 bg-black/80 backdrop-blur-sm animate-fade-in sm:p-4"
      onClick={onClose}
    >
      <div
        className="relative max-h-[92vh] w-full max-w-[20rem] overflow-y-auto rounded-2xl border border-purple-500/30 bg-gradient-to-br from-gray-900 to-black shadow-2xl animate-scale-in sm:max-w-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute right-3 top-3 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20 sm:right-4 sm:top-4"
        >
          <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="space-y-4 p-4 sm:space-y-6 sm:p-8">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
            <div
              className={`flex shrink-0 items-center justify-center rounded-lg p-3 text-2xl ${getTypeColor(experience.type)} ${experience.image ? "h-12 w-12 sm:h-16 sm:w-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-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 sm:text-3xl">
                {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>
  );
}
