import type { Project } from "../../../types/project";

interface ProjectsSectionProps {
	projects: Project[];
	onOpenProject: (projectId: string) => void;
}

export const ProjectsSection = ({
	projects,
	onOpenProject,
}: ProjectsSectionProps) => {
	if (projects.length === 0) {
		return <p className="muted">No projects yet.</p>;
	}

	return (
		<div className="home-project-grid">
			{projects.map((project) => (
				<article
					className="card project-card home-project-card"
					key={project.id}
				>
					<div className="stack-sm">
						<h3>{project.name}</h3>
						{project.description && (
							<p className="muted">{project.description}</p>
						)}
					</div>
					<button
						className="ghost-button small"
						type="button"
						onClick={() => onOpenProject(project.id)}
					>
						Open Workspace
					</button>
				</article>
			))}
		</div>
	);
};