'use client';

import { motion } from 'framer-motion';
import { Award, ExternalLink } from 'lucide-react';
import type { Certification } from '@/lib/constants/products';

interface CertificationListProps {
  certifications: Certification[];
}

export function CertificationList({ certifications }: CertificationListProps) {
  if (certifications.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-3">
      {certifications.map((cert, index) => {
        const link = cert.link && cert.link !== '#' ? cert.link : null;
        const className =
          'inline-flex items-center gap-2 rounded-full border border-border-primary bg-bg-elevated px-4 py-2 text-sm text-text-secondary shadow-sm transition-all hover:border-border-secondary hover:shadow-md';
        const motionProps = {
          initial: { opacity: 0, scale: 0.95 },
          whileInView: { opacity: 1, scale: 1 },
          viewport: { once: true, margin: '-50px' },
          transition: { duration: 0.3, delay: index * 0.05 },
          className,
        };
        const inner = (
          <>
            <Award className="h-4 w-4 text-brand-ink" />
            <span className="font-medium">{cert.name}</span>
            <span className="text-xs text-text-muted">{cert.issuer}</span>
            {link && <ExternalLink className="h-3 w-3 text-text-muted" />}
          </>
        );
        return link ? (
          <motion.a key={cert.name} href={link} {...motionProps}>
            {inner}
          </motion.a>
        ) : (
          <motion.span key={cert.name} {...motionProps}>
            {inner}
          </motion.span>
        );
      })}
    </div>
  );
}