import Image from "next/image";
import DynamicSvgIcon from "../svg/DynamicSvgIcon";

const Bio = () => {
    bio: {
          text: `/**
    * Bio
    * Hi! I'm Hari Jess, a passionate full-stack developer specializing in
    * web & mobile development. With 2 years of experience, I am committed
    * to creating modern, elegant, and sustainable solutions, while
    * emphasizing code quality and user experience.
    */`,
    },

    objectives: {
      text: `/**
    * Objectives
    * My goal is to become a developer capable of transforming complex
    * ideas into reliable and intuitive applications. Determined to
    * progress, I am constantly learning new technologies, strengthening
    * my skills, and always looking for new challenges to evolve in the
    * field of web & mobile development.
    */`,
      },
    };

  const currentFavoriteTechStack = [
    { name: "NextJS", icon: "nextjs", color: "fill-header-primary" },
    { name: "React.js", icon: "react", color: "fill-[#61dbfb]" },
    { name: "TypeScript", icon: "typescript", color: "fill-[#007ACC]" },
    { name: "JavaScript", icon: "javascript", color: "fill-[#f0db4f]" },
    { name: "TailwindCSS", icon: "tailwind", color: "fill-[#3490dc]" },
    { name: "Node.js", icon: "nodejs", color: "fill-[#3c873a]" },
  ];

  return (
    <section className="max-h-full px-4 pt-4 pb-16 flex-1 overflow-auto">
      <Image
        src={"/me.webp"}
        width={160}
        height={160}
        alt="profile picture"
        className="rounded float-left mr-4 mb-1"
      />
      <div className="space-y-3">
        {Object.entries(texts).map(([key, { text }]) => (
          <section key={key}>
            {/* Display the comment block as-is (monospace, preserving line breaks) */}
            <pre className="rounded-lg p-3 font-mono text-sm bg-gray-50 border border-gray-200 whitespace-pre-wrap dark:bg-gray-900 dark:text-gray-100">
              {text}
            </pre>
          </section>
        ))}
      </div>
      <div className="mt-8">
        <h5 className="text-lg text-accent-primary font-semibold mb-2">
          Current favorite tech stack
        </h5>
        <div className="flex gap-4 flex-wrap">
          {currentFavoriteTechStack.map((stack) => {
            return (
              <div className="relative">
                <DynamicSvgIcon
                  name={stack.icon}
                  className={`w-10 ${stack.color}`}
                />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default Bio