/* global React, PROJECTS, SectionHead, Tag, useInView */

const { useRef } = React;

function Projects({ onOpenProject }) {
  const ref  = useRef(null);
  const seen = useInView(ref);

  return (
    <section id="projects">
      <SectionHead num="02 / 05" title="Projects" />
      <table ref={ref} className={`proj-table ${seen ? "in" : ""}`}>
        <thead>
          <tr>
            <th className="col-n">№</th>
            <th className="col-name">Project</th>
            <th className="col-year">Year</th>
            <th className="col-stack">Stack</th>
            <th className="col-status">Status</th>
            <th className="col-open"></th>
          </tr>
        </thead>
        <tbody>
          {PROJECTS.map((p) => (
            <tr key={p.slug} onClick={() => onOpenProject(p)} style={{ cursor: "pointer" }}>
              <td className="col-n"    data-label="№">{p.n}</td>
              <td className="col-name" data-label="Project">
                {p.name}
                <span className="sub">{p.sub}</span>
              </td>
              <td className="col-year"   data-label="Year">{p.year}</td>
              <td className="col-stack"  data-label="Stack">
                {p.stack.map((s) => <Tag key={s}>{s}</Tag>)}
              </td>
              <td className="col-status" data-label="Status">{p.status}</td>
              <td className="col-open">↗</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

Object.assign(window, { Projects });