import React from 'react';

const Introduction: React.FC = () => {
  const name: string = "Marisi";
  const role: string = "Full Stack Developer";

  const skillsInfo: { [key: string]: string[] } = {
    React: [
      "Classes",
      "Hooks",
      "Context",
      "Material UI",
      "Redux",
      "Redux Toolkit"
    ],
    "Node.js": [
      "Vanilla",
      "Express"
    ],
    JavaScript: [
      "ES6+",
      "AJAX & API’s - REST and GraphQL",
      "Graphing (d3.js) & Realtime (websockets and http://socket.io/socket.io)",
      "OAuth",
      "Git",
      "Github"
    ],
    Testing: [
      "TypeScript",
      "Cypress",
      "Vitest",
      "Vite"
    ],
    Databases: [
      "SQL - MySQL",
      "NoSQL - MongoDB with Mongoose.js",
      "Redis",
      "Firebase",
      "GraphCMS/Hygraph"
    ],
    DevOps: [
      "Serverless (inc. Netlify)",
      "cPanel",
      "Apache",
      "XAMPP"
    ],
    "CSS 3": [
      "Responsive design",
      "Flexbox & CSS Grid",
      "Pre-processors (SASS)",
      "CSS frameworks"
    ],
    HTML5: [
      "Semantically correct for accessibility and SEO"
    ],
    Platforms: [
      "WordPress",
      "Elementor",
      "WooCommerce",
      "Thrivecart",
      "ActiveCampaign",
      "Figma"
    ]
  };

  return (
    <div className="introduction">
      <h1>I am {name}</h1>
      <p>As a {role}, I am passionate about innovative digital solutions.</p>
      <p>My skills include:</p>
      <ul>
        {Object.entries(skillsInfo).map(([category, skills], index) => (
          <li key={index}>
            <strong>{category}:</strong> {skills.join(", ")}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Introduction;