import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { useSettings } from '../../shared/api/useSettings';
import { LoadError } from '../../shared/ui/LoadError';
import { Skeleton } from '../../shared/ui/Skeleton';
import { SettingsForm } from './SettingsForm';

export function SettingsView(): JSX.Element {
	const settingsQuery = useSettings();

	return (
		<section
			className="view"
			aria-label={ __( 'Settings', 'aiplaz-link-checkup' ) }
		>
			<div className="view-head">
				<h1 className="display">
					{ __( 'Settings', 'aiplaz-link-checkup' ) }
				</h1>
			</div>
			{ settingsQuery.isPending && <Skeleton /> }
			{ settingsQuery.isError && settingsQuery.data === undefined && (
				<LoadError
					error={ settingsQuery.error }
					onRetry={ () => {
						void settingsQuery.refetch();
					} }
				/>
			) }
			{ settingsQuery.data !== undefined && (
				<SettingsForm saved={ settingsQuery.data } />
			) }
		</section>
	);
}