"use client"

import React from "react"
import { PersonalIntroductionSection } from "@/styles/personal-introduction-styles"

interface PersonalInfo {
  nombre: string
  rol: string
  tecnologias: string[]
  aprendiendo: string
  ubicacion: string
  objetivos: string[]
}

const crearPresentacionPersonal = (info: PersonalInfo): string => {
  return `👷 ${info.nombre} - ${info.rol}
💡 Stack Tecnológico: ${info.tecnologias.join(", ")}
📚 Aprendiendo: ${info.aprendiendo}
📍 Ubicación: ${info.ubicacion}
🎯 Objetivos: ${info.objetivos.join(" | ")}`
}

export const PersonalIntroduction = () => {
  const presentacion = crearPresentacionPersonal({
    nombre: "Yulimar Duque de Alba",
    rol: "Frontend & Mobile Developer",
    tecnologias: ["TypeScript", "React", "React Native", "Next.js", "Tailwind CSS"],
    aprendiendo: "AI & Machine Learning",
    ubicacion: "Medellín",
    objetivos: ["Construir proyectos impactantes", "Mantenerse saludable", "Disfrutar del proceso"]
  })

  return <PersonalIntroductionSection>{presentacion}</PersonalIntroductionSection>
}