import { useData } from "vike-react/useData";
import type { Data } from "./+data";
import "../../styles.css";
import resumeImage from "../../assets/resume-image.jpg";

export default function Page() {
  return (
    <div
      css={{
        fontFamily: '"EB Garamond", serif',
        fontOpticalSizing: "auto",
        fontWeight: 400,
        fontStyle: "normal",
        fontSize: "0.9em",

        display: "flex",
        flexDirection: "row",
        justifyContent: "start",
      }}
    >
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          width: "30%",
          backgroundColor: "lavender",
          padding: "1em",
          gap: "1em",
        }}
      >
        <Header />
        <MainSkills />
        <ExposedSkills />
      </div>
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          width: "70%",
          padding: "1em",
        }}
      >
        <Employment />
        <ProjectsHobbies />
        <Education />
      </div>
    </div>
  );
}

function Header() {
  const { contactInfo } = useData<Data>();
  return (
    <div
      css={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <section>
        <div>
          <img
            src={resumeImage}
            alt="headshot"
            css={{ width: "14em", borderRadius: "50%", objectFit: "contain" }}
          />
        </div>
      </section>
      <section>
        <h2 css={{ marginBottom: "0.3em" }} className="lg bold">
          {contactInfo.name}
        </h2>
      </section>
      <section css={{ textAlign: "center" }}>
        <ul className="inline">
          <li>{contactInfo.phone}</li>
          <li>{contactInfo.email}</li>
        </ul>
        <ul className="inline">
          <li>{contactInfo.location}</li>
          <li>
            <a href={contactInfo.website}>{contactInfo.website}</a>
          </li>
        </ul>
      </section>
    </div>
  );
}

function MainSkills() {
  const { mainSkills } = useData<Data>();
  return (
    <section className="relevant-skills">
      <h3>Main Skills/Technologies</h3>
      <div>
        <ul className="inline">
          {mainSkills.map((skill) => (
            <li>{skill}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ExposedSkills() {
  const { exposedSkills } = useData<Data>();
  return (
    <section className="relevant-skills">
      <h3>Have Used</h3>
      <div>
        <ul className="inline">
          {exposedSkills.map((skill) => (
            <li>{skill}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Employment() {
  const { employment } = useData<Data>();
  return (
    <section className="employment">
      <h1>
        <div className="fit-content">
          <span className="bold">Employment </span>
          <span css={{ fontWeight: 300 }} className="sm italic right">
            (Most recent)
          </span>
        </div>
      </h1>
      <div>
        <ul className="no-bullet">
          {employment.map((employment) => (
            <li>
              <div className="space-between">
                <div>
                  <span className="bold">{employment.title},</span>
                  <span>
                    {employment.company}, {employment.location}
                  </span>
                </div>
                <div className="italic right">
                  {employment.start}-{employment.end}
                </div>
              </div>
              <div>
                <ul>
                  {employment.highlights.map((highlight) => (
                    <li>{highlight}</li>
                  ))}
                </ul>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ProjectsHobbies() {
  const { projectsHobbies } = useData<Data>();
  return (
    <section className="projects-hobbies">
      <h1>
        <div className="fit-content">
          <div className="bold">Projects/Hobbies</div>
        </div>
      </h1>
      <div>
        <ul className="no-bullet">
          {projectsHobbies.map((projectHobby) => (
            <li>
              <div>
                <span className="bold">{projectHobby.title}</span>
                <span>
                  <ul className="inline">
                    {projectHobby.highlights.map((highlight) => (
                      <li>{highlight}</li>
                    ))}
                  </ul>
                </span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Education() {
  const { education } = useData<Data>();
  return (
    <section className="education">
      <h1>
        <span className="bold">Education</span>
      </h1>
      <div>
        <ul className="no-bullet">
          {education.map((education) => (
            <li>
              <div className="space-between">
                <div>
                  <span className="bold">{education.title},</span>
                  <span>{education.location}</span>
                </div>
                <div className="italic right">
                  {education.start}–{education.end}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}