export interface RecentProjectsListProps {
	projects: string[];
	onOpenProject: (path: string) => void;
	onForgetProject: (path: string) => void;
}

export function RecentProjectsList({
	projects,
	onOpenProject,
	onForgetProject,
}: RecentProjectsListProps) {
	return (
		<div style={{ marginTop: "12px" }}>
			<div style={{ fontSize: "0.9em", color: "#666" }}>Recent projects</div>
			<ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0" }}>
				{projects.map((project) => {
					const displayName =
						project.split("/").filter(Boolean).pop() ?? project;
					return (
						<li key={project} style={{ marginBottom: "6px" }}>
							<div
								style={{ display: "flex", gap: "6px", alignItems: "center" }}
							>
								<button
									type="button"
									onClick={() => onOpenProject(project)}
									style={{
										flex: 1,
										textAlign: "left",
										padding: "8px 10px",
										borderRadius: "6px",
										border: "1px solid #ddd",
										background: "#f7f7f7",
										cursor: "pointer",
										fontFamily: "monospace",
										fontSize: "0.9em",
									}}
									title={project}
								>
									{displayName}
								</button>
								<button
									type="button"
									aria-label={`Forget ${displayName}`}
									onClick={() => onForgetProject(project)}
									style={{
										width: "32px",
										height: "32px",
										borderRadius: "6px",
										border: "1px solid #ddd",
										background: "#fff",
										cursor: "pointer",
										fontSize: "1.1em",
										lineHeight: 1,
									}}
								>
									×
								</button>
							</div>
						</li>
					);
				})}
			</ul>
		</div>
	);
}
