import { GeneralException } from '@self/utils/error';

interface ErrorMessageProps {
	error: Error;
}

export function ErrorMessage({ error }: ErrorMessageProps) {
	if (error instanceof GeneralException && error.type === 'unauthorized') {
		return (
			<div className='rounded border border-yellow-200 bg-yellow-50 px-4 py-3 text-yellow-800'>
				<p className='text-sm font-semibold'>{error.title}</p>
				{typeof error.detail === 'string' && error.detail.length > 0 && (
					<p className='mt-1 text-sm'>{error.detail}</p>
				)}
			</div>
		);
	}

	if (error instanceof GeneralException) {
		return (
			<div className='rounded border border-red-200 bg-red-50 px-4 py-3 text-red-800'>
				<p className='text-sm font-semibold'>{error.title}</p>
				{typeof error.detail === 'string' && error.detail.length > 0 && (
					<details className='mt-2'>
						<summary className='cursor-pointer text-xs'>Show error details</summary>
						<pre className='mt-1 overflow-x-auto whitespace-pre-wrap text-xs'>
							{error.detail}
						</pre>
					</details>
				)}
			</div>
		);
	}

	return (
		<div className='rounded border border-red-200 bg-red-50 px-4 py-3 text-red-800'>
			<p className='text-sm'>{error.name}: {error.message}</p>
		</div>
	);
}