my-protfolio/src/components/SkillsSection.tsx

'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { Code, BarChart2, Wand2 } from 'lucide-react';
import {
  skillCategories,
  keywordBadges,
  toolsList,
  filterTabs,
  FilterTab,
} from '@/data/skills';
import styles from './SkillsSection.module.css';

export const SkillsSection: React.FC = () => {
  const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');

  const filteredTools = toolsList.filter((tool) =>
    tool.category.includes(activeFilter)
  );

  const getFilterIcon = (id: FilterTab['id']) => {
    switch (id) {
      case 'software-engineering':
        return <Code size={18} />;
      case 'product-management':
        return <BarChart2 size={18} />;
      case 'design-ux':
        return <Wand2 size={18} />;
    }
  };

  return (
    <section id="skills" className={styles.skillsSection}>
      <div className="content-container">
        {/* Section Header */}
        <div className="section-header">
          <span className="section-eyebrow">SKILLS & TOOLS</span>
          <div className="section-title-wrap">
            <h2 className="section-title">The Stack Behind the Work...</h2>
            <div className="section-underline" />
          </div>
        </div>

        {/* Main Card Container */}
        <div className={styles.mainCard}>
          {/* Section: Skills */}
          <div className={styles.skillsBlock}>
            <span className={styles.cardEyebrow}>SKILLS</span>

            {/* 8 Skill Meters Grid */}
            <div className={styles.skillsGrid}>
              {skillCategories.map((skill) => (
                <div key={skill.name} className={styles.skillItem}>
                  <div className={styles.skillName}>{skill.name}</div>
                  <div className={styles.meterSegments}>
                    {[1, 2, 3, 4, 5].map((seg) => (
                      <div
                        key={seg}
                        className={`${styles.segment} ${
                          seg <= skill.level ? styles.segmentFilled : ''
                        }`}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Keyword Badges */}
            <div className={styles.badgeCloud}>
              {keywordBadges.map((badge) => (
                <span key={badge} className={styles.badgePill}>
                  {badge}
                </span>
              ))}
            </div>
          </div>

          {/* Section: Tools */}
          <div className={styles.toolsBlock}>
            <span className={styles.cardEyebrow}>TOOLS</span>

            {/* 8-Column Grid */}
            <div className={styles.toolsGrid}>
              {toolsList.map((tool) => {
                const isMatching = tool.category.includes(activeFilter);
                return (
                  <div
                    key={tool.id}
                    className={`${styles.toolTile} ${
                      !isMatching ? styles.toolDimmed : ''
                    }`}
                  >
                    <div className={styles.toolIconContainer}>
                      <Image
                        src={tool.icon}
                        alt={tool.name}
                        width={64}
                        height={64}
                        className={styles.toolIcon}
                      />
                    </div>
                    <span className={styles.toolLabel}>{tool.name}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Filter Tabs Under Card */}
        <div className={styles.filterTabsRow}>
          {filterTabs.map((tab) => {
            const isActive = activeFilter === tab.id;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveFilter(tab.id)}
                className={`pill-btn ${
                  isActive ? 'pill-btn-primary' : 'pill-btn-outline'
                } ${styles.filterButton}`}
              >
                {getFilterIcon(tab.id)}
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
};