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>
  );
}