hwilliams-dev/components/ProjectCard.tsx

"use client";

import { useEffect, useState } from "react";
import type { Project } from "@/data/content";
import SimpleGallery from "./SimpleGallery";


type Props = {
  project: Project;
  visible: boolean;
  selected: boolean;
  setSelected: (selected: any) => void;
  setExpandedHeight: (activeId: number) => void;
};

export default function ProjectCard({ project, visible, selected = false, setSelected, setExpandedHeight}: Props) {
  const [hovered, setHovered] = useState(false);
  const [expandedImage, setExpandedImage] = useState(false);
  const [currentExpandedHeight, setCurrentExpandedHeight] = useState(0);
  function projectTagsComponent(project: Project){
    return (<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 12 }}>
          {project.tags.map((tag) => (
            <span key={tag}
              style={{                
                fontFamily: "var(--mono)",
                fontSize: 11,
                fontWeight: 500,
                color: "var(--accent)",
                padding: "3px 10px",
                background: "var(--accent-bg)",
                borderRadius: 4,
                letterSpacing: "0.02em",
              }}>
              {tag}
            </span>
          ))}
        </div>);
  }
  
  function notSelectedComponent(){
    return (
      <div 
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={() => setSelected(project.id)}
        style={{             
          height: "100%",
          minWidth: "10em",
          textDecoration: "none",
          padding: 28,
          overflow: "hidden",
          background: hovered ? "var(--surface-hover)" : "var(--surface)",
          border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
          borderRadius: 8,
          transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
          transform: visible
            ? hovered
              ? "translateY(-3px)"
              : "translateY(0)"
            : "translateY(12px)",
          opacity: visible ? 1 : 0,
          boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
          pointerEvents: "auto",
          cursor: "pointer"
        }}>
        <div
          style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12,
          }}>
          <div
            style={{fontFamily: "var(--mono)", fontSize: 18, fontWeight: 700, color: hovered ? "var(--accent)" : "var(--fg)", transition: "color 0.2s"}}>
            {project.title}
          </div>          
          <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", padding: "2px 8px", background: "var(--bg)", borderRadius: 4, border: "1px solid var(--border)"}}>
            {project.year}
          </div>        
        </div>
        {projectTagsComponent(project)}
        <p style={{fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-secondary)", margin: "0 0 16px 0"}}>
          {project.description}
        </p>
        {project.images && project.images.length > 0 && imgComponent()}
        
      </div>
    );
  }
  
  function selectedComponent(){
      return (
      <div 
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onClick={() => setSelected(project.id)}
        style={{
          height: "100%",
          minWidth: "10em",
          overflow: "hidden",
          textDecoration: "none",
          padding: 28,
          background: hovered ? "var(--surface-hover)" : "var(--surface)",
          border: `2px solid var(--accent)`,
          borderRadius: 8,
          transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
          transform: visible
              ? "translateY(-3px)"
              : "translateY(0)",
          opacity: visible ? 1 : 0,
          boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
          pointerEvents: "auto",
          cursor: "pointer"
        }}>
        <div
          style={{display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12
          }}>
          <div
            style={{fontFamily: "var(--mono)", fontSize: 18, fontWeight: 700, color: hovered ? "var(--accent)" : "var(--fg)", transition: "color 0.2s"}}>
            {project.title}
          </div>
          <div style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", padding: "2px 8px", background: "var(--bg)", borderRadius: 4, border: "1px solid var(--border)"}}>
            {project.year}
          </div>
        </div>
         {projectTagsComponent(project)}
        <p style={{fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-secondary)", margin: "0 0 16px 0"}}>
          {project.description}
        </p>
     
       {project.images && project.images.length > 0 && (
        <SimpleGallery images={project.images} videos={project.videos} title={project.title} expansionHandler={(height: number) => {
          setExpandedHeight(height);
          setExpandedImage(height > 0);         
        }} />
      )}
        
      </div>
    );
      }

  function imgComponent(){
    return (
      <img src={project.images?.[0]} alt={`${project.title} screenshot`} style={{width: "100%", borderRadius: 4, marginBottom: 16, objectFit: "cover", maxHeight: 180}} />
    );
  }

  useEffect(() => {
    if (!selected) {
     if (expandedImage) {
      setExpandedHeight(0);
      setExpandedImage(false);
    }
    }
  });

  if (selected) {
    return selectedComponent();
  } else {
   
    return notSelectedComponent();
  }
  
}