import type { Session } from "../../../types/session";

interface RecentSessionsSectionProps {
	sessions: Session[];
	onOpen: (session: Session) => void;
}

export const RecentSessionsSection = ({
	sessions,
	onOpen,
}: RecentSessionsSectionProps) => {
	if (sessions.length === 0) return null;

	return (
		<section className="card stack home-section">
			<div className="page-header">
				<div>
					<p className="eyebrow">Recent sessions</p>
					<h2>{sessions.length}</h2>
				</div>
			</div>
			<div className="recent-sessions-list">
				{sessions.map((session) => (
					<article className="recent-session-item" key={session.id}>
						<div className="recent-session-info">
							<span className="recent-session-name">
								{session.display_name ||
									session.tool_type_name ||
									"Unnamed Session"}
							</span>
							<span className="muted">
								{session.project_name} · {session.tool_type_name}
							</span>
						</div>
						<button
							className="ghost-button small"
							type="button"
							onClick={() => onOpen(session)}
						>
							Open
						</button>
					</article>
				))}
			</div>
		</section>
	);
};