import type { ProjectMetadata } from "../server"

interface ProjectsProps {
    projects: ProjectMetadata[]
}

export function Projects({ projects }: ProjectsProps) {
    const statusText = (status: "recent" | "active" | "inactive") => {
        switch (status) {
            case "recent": return "Modified in the last 2 weeks"
            case "active": return "Modified in the last month"
            case "inactive": return "Modified over a month ago"
        }
    }

    return (
        <div>
            <link rel="stylesheet" href="/src/css/projects.css" />
            <h1>Projects</h1>
            <ul className="project-grid">
                {projects.map(project => (
                    <li key={project.name} className="project-card">
                        <h2 className="project-title">
                            <a
                                href={`/p/${project.name}`}
                                title={`Last modified ${project.mtime.toLocaleString()}`}
                            >
                                {project.name}
                            </a>
                            <abbr className="status-icon" title={statusText(project.status)}>
                                {project.status === "recent" ? "🟢" : project.status === "active" ? "🟡" : "🔴"}
                            </abbr>
                        </h2>
                        <ul className="project-meta">
                            <li><a href={project.github}>GitHub</a></li>
                            {project.url && (
                                <li><a href={project.url}>{project.url.replace(`https://${project.name}.`, "")}</a></li>
                            )}
                        </ul>
                        <div className="last-modified">
                            {project.mtime.toLocaleString()}
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    )
}