"use client";

import { motion } from "framer-motion";

export default function AboutAnimations({ skills }: { skills: any[] }) {
    return (
        <>
            {skills.map((skill, i) => (
                <div key={i}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.6rem", fontSize: "0.85rem", fontWeight: 800 }}>
                        <span style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>{skill.icon} {skill.name}</span>
                        <span style={{ color: "var(--primary)" }}>{skill.level}%</span>
                    </div>
                    <div style={{ height: 10, background: "var(--muted)", borderRadius: 50, overflow: "hidden" }}>
                        <motion.div initial={{ width: 0 }} whileInView={{ width: `${skill.level}%` }} viewport={{ once: true }} transition={{ duration: 1.4, ease: "easeOut", delay: i * 0.08 }}
                            style={{ height: "100%", background: "linear-gradient(90deg, var(--primary), #60a5fa)", borderRadius: 50 }} />
                    </div>
                </div>
            ))}
        </>
    );
}