import { useTranslation } from 'react-i18next';

const Skills = () => {
    const { t } = useTranslation();

    const skillCategories = [
        {
            title: 'skills.languages.title',
            skills: ['JavaScript/TypeScript', 'PHP', 'SQL', 'HTML/CSS', 'Bash', 'Go']
        },
        {
            title: 'skills.frameworks.title',
            skills: ['React', 'Node.js', 'Effect', 'Next.js', 'TailwindCSS', 'Nest.js']
        },
        {
            title: 'skills.tools.title',
            skills: ['Git', 'Docker', 'Linux', 'PostgreSQL', 'MongoDB', 'REST API']
        },
        {
            title: 'skills.other.title',
            skills: ['Agile/Scrum', 'CI/CD', 'TDD', 'Architecture microservices', 'Cloud Computing', 'Ansible', 'Terraform/Opentofu']
        }
    ];

    return (
        <section id="skills" className="py-20 px-8">
            <div className="max-w-4xl mx-auto">
                <h2 className="text-4xl font-bold mb-12 text-accent">{t('skills.title')}</h2>
                <div className="grid md:grid-cols-2 gap-8">
                    {skillCategories.map((category, index) => (
                        <div key={index} className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
                            <h3 className="text-xl font-semibold mb-4 text-secondary">{t(category.title)}</h3>
                            <div className="flex flex-wrap gap-2">
                                {category.skills.map((skill, skillIndex) => (
                                    // <span 
                                    //     key={skillIndex}
                                    //     className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all"
                                    // >
                                    //     {skill}
                                    // </span>
                                    <Skill key={skillIndex} name={skill} />
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export const Skill = ({ name, key }: { name: string, key: number }) => {
    return (
        <span key={key} className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all">
            {name}
        </span>
    );
}

export default Skills;
