import { A } from "@solidjs/router";
import { For } from "solid-js";
import { ArrowRight } from "lucide-solid";
import { useScrollReveal } from "../hooks/useScrollReveal";
import { hobbies, hobbiesPage } from "../data/hobbies";
import { Icon } from "@/lib/icons";

export default function HobbiesSection() {
  const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.2 });

  return (
    <section id="hobbies" class="py-20 md:py-32 px-[5vw]">
      <div class="max-w-[1200px] mx-auto">
        <div class="space-y-4 mb-12">
          <h2 class="section-label">{hobbiesPage.label}</h2>
          <p class="text-text-secondary max-w-xl">
            {hobbiesPage.sectionSubtitle}
          </p>
        </div>
        <div ref={revealRef} class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <For each={hobbies}>
            {(hobby) => (
              <div class="border border-warm-grey p-8 space-y-6 group hover:border-amber/30 transition-colors">
                <div class="w-10 h-10 flex items-center justify-center border border-warm-grey">
                  <Icon name={hobby.icon} size={20} class="text-amber" />
                </div>
                <h3 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
                  {hobby.title}
                </h3>
                <p class="text-text-secondary leading-relaxed">
                  {hobby.shortDescription}
                </p>
                <A
                  href="/hobbies"
                  class="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group/link"
                >
                  <span class="text-link">{hobbiesPage.linkText}</span>
                  <ArrowRight
                    size={18}
                    class="group-hover/link:translate-x-1 transition-transform"
                  />
                </A>
              </div>
            )}
          </For>
        </div>
      </div>
    </section>
  );
}