"use client";

import { useState } from "react";
import type { Project } from "@/data/content";

type Props = {
  project: Project;
  visible: boolean;
};

export default function ProjectCard({ project, visible }: Props) {
  const [hovered, setHovered] = useState(false);

  return (
    <a
      href={project.link}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: "block",
        textDecoration: "none",
        padding: 28,
        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",
      }}
    >
      <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>
      <p
        style={{
          fontFamily: "var(--sans)",
          fontSize: 14,
          lineHeight: 1.6,
          color: "var(--fg-secondary)",
          margin: "0 0 16px 0",
        }}
      >
        {project.description}
      </p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {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>
    </a>
  );
}