"use client";

import { motion } from "framer-motion";

const icons: Record<string, string> = {
  "فناوری و توسعه نرم‌افزار": "⚡",
  "بازاریابی دیجیتال": "📢",
  "برندینگ و هویت بصری": "🎨",
  "استراتژی محصول": "🧭",
  "محتوا و تولید محتوا": "✍️",
  "متن‌باز": "🔓",
  "Technology & Software Development": "⚡",
  "Digital Marketing": "📢",
  "Branding & Visual Identity": "🎨",
  "Product Strategy": "🧭",
  "Content & Content Creation": "✍️",
  "Open Source": "🔓",
};

export function FocusAreas({ areas }: { areas: string[] }) {
  return (
    <div className="flex flex-wrap gap-3">
      {areas.map((area, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.3, delay: i * 0.06 }}
          className="flex items-center gap-2 rounded-full border border-border bg-surface px-4 py-2 text-sm text-text-secondary hover:border-accent/30 hover:text-text-primary transition-colors"
        >
          <span>{icons[area] ?? "●"}</span>
          {area}
        </motion.div>
      ))}
    </div>
  );
}
