"use client";


type Props = {
  section: string;
  setSection: (s: string) => void;
};

const items = ["profile", "projects"];

export default function Nav({ section, setSection }: Props) {
  return (
    <nav
      style={{
        display: "flex",
        gap: 0,
        borderBottom: "1px solid var(--border)",
        fontFamily: "var(--mono)",
        fontSize: 13,
        userSelect: "none",
      }}>

      {items.map((item) => (

        <button
          key={item}
          onClick={() => setSection(item)}
          style={{
            background: section === item ? "var(--surface)" : "transparent",
            color: section === item ? "var(--accent)" : "var(--muted)",
            border: "none",
            borderBottom: section === item ? "2px solid var(--accent)" : "2px solid transparent",
            padding: "12px 24px",
            cursor: "pointer",
            fontFamily: "inherit",
            fontSize: "inherit",
            fontWeight: 500,
            letterSpacing: "0.03em",
            textTransform: "lowercase",
            transition: "all 0.2s",
          }}
          onMouseEnter={(e) => {
            if (section !== item)
              (e.target as HTMLElement).style.color = "var(--fg)";
          }}
          onMouseLeave={(e) => {
            if (section !== item)
              (e.target as HTMLElement).style.color = "var(--muted)";
          }}>

          <span style={{ opacity: 0.4, marginRight: 6 }}></span>
          {item}
        </button>
      ))}

    </nav>
  );
}