"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { shouldBypassImageOptimization } from "@/lib/api";
import { useLanguage } from "@/lib/i18n";
import {
  getWebsiteSkillImage,
  getWebsiteSkillLabel,
  getWebsiteSkillValue,
  type WebsiteSkill,
} from "@/lib/website-skills";

export function ExperienceGrid({ skills }: { skills: WebsiteSkill[] }) {
  const { language } = useLanguage();

  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {skills.map((skill) => {
        const skillLabel = getWebsiteSkillLabel(skill, language);
        const skillQueryLabel = getWebsiteSkillLabel(skill);
        const skillValue = getWebsiteSkillValue(skill);
        const skillImage = getWebsiteSkillImage(skill, "/placeholder.png");

        return (
          <Link
            key={skillValue}
            href={`/guides?expertise=${encodeURIComponent(skillQueryLabel)}`}
          >
            <Card className="group cursor-pointer overflow-hidden border-0 py-0 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
              <CardContent className="image-zoom relative aspect-[4/3] p-0">
                <Image
                  src={skillImage}
                  alt={skillLabel}
                  fill
                  sizes="(min-width: 1280px) 25vw, (min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                  unoptimized={shouldBypassImageOptimization(skillImage)}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-6">
                  <h2 className="mb-1 text-xl font-bold text-white">
                    {skillLabel}
                  </h2>
                  <p className="flex items-center gap-2 text-sm text-white/75">
                    <span>Explore Guides</span>
                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </p>
                </div>
              </CardContent>
            </Card>
          </Link>
        );
      })}
    </div>
  );
}