import type { JSX } from 'react';
import { useJobs } from '../../shared/api/useJobs';
import { LoadError } from '../../shared/ui/LoadError';
import { Skeleton } from '../../shared/ui/Skeleton';
import { JobRow } from './JobRow';

export function JobsPanel( { now }: { now: number } ): JSX.Element {
	const jobsQuery = useJobs();

	return (
		<>
			{ jobsQuery.isPending && <Skeleton /> }
			{ jobsQuery.isError && jobsQuery.data === undefined && (
				<LoadError
					error={ jobsQuery.error }
					onRetry={ () => {
						void jobsQuery.refetch();
					} }
				/>
			) }
			{ jobsQuery.data !== undefined && (
				<div className="panel">
					{ jobsQuery.data.map( ( job ) => (
						<JobRow key={ job.id } job={ job } now={ now } />
					) ) }
				</div>
			) }
		</>
	);
}