"use client";

import { useProfile } from "../context/ProfileContext";

export function AgentSkills() {
  const { skills } = useProfile();

  return (
    <section className="w-full max-w-6xl mx-auto px-4 space-y-6 sm:space-y-8">
      <div className="text-center space-y-3">
        <h2 className="text-3xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500 sm:text-4xl">
          Agent Skills
        </h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
          Skills i throw at my Agents to help them solve my prompts.
        </p>
      </div>

      {skills.length === 0 ? (
        <div className="rounded-3xl border border-white/10 bg-white/5 px-5 py-8 text-center text-gray-400 sm:px-6 sm:py-10">
          No agent skills published yet.
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 sm:gap-6">
          {skills.map((skill, index) => (
            <article
              key={`${skill.name}-${index}`}
              className="group w-full rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-5 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40 sm:p-6 md:p-7"
            >
              <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
                <div className="space-y-2">
                  <div className="flex flex-wrap gap-2">
                    {(skill.emojis || []).map((emoji, emojiIndex) => (
                      <span
                        key={`${skill.name}-emoji-${emojiIndex}`}
                        className="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-amber-500/15 text-lg border border-amber-500/20"
                        title={emoji}
                      >
                        {emoji}
                      </span>
                    ))}
                  </div>
                  <h3 className="text-xl font-semibold text-white sm:text-2xl">{skill.name}</h3>
                </div>

                {skill.link ? (
                  <a
                    href={skill.link}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center justify-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20 sm:self-start"
                  >
                    Open Link
                  </a>
                ) : null}
              </div>

              <div className="mt-5 space-y-4 text-sm leading-6 text-gray-300">
                <p>
                  <span className="font-semibold text-amber-200">Description:</span> {skill.description}
                </p>
                <p>
                  <span className="font-semibold text-amber-200">Purpose:</span> {skill.purpose}
                </p>
                <p>
                  <span className="font-semibold text-amber-200">Solves:</span> {skill.what_it_solves}
                </p>
              </div>

              <div className="mt-6 flex flex-wrap gap-2">
                {(skill.tags || []).map((tag, tagIndex) => (
                  <span
                    key={`${skill.name}-tag-${tagIndex}`}
                    className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs font-medium text-gray-200"
                  >
                    {tag}
                  </span>
                ))}
              </div>
            </article>
          ))}
        </div>
      )}
    </section>
  );
}