import { useEffect, useState } from 'react'

import type { FC } from 'react'


type Props = {
    url:       string
    alt?:      string
    className?: string }


const ThumbnailPreview: FC<Props> = ({ url, alt = 'サムネール', className = 'h-16 w-16' }) => {
    const [failed, setFailed] = useState (false)

    useEffect (() => {
	setFailed (false)
    }, [url])

    if (!(url))
      {
	return (
	    <div
		className={`${ className } flex items-center justify-center rounded border
			    border-border bg-muted text-xs text-muted-foreground`}>
	      なし
	    </div>)
      }

    if (failed)
      {
	return (
	    <div
		className={`${ className } flex items-center justify-center rounded border
			    border-amber-300 bg-amber-50 p-2 text-center text-xs
			    text-amber-700 dark:border-amber-900 dark:bg-amber-950
			    dark:text-amber-200`}>
	      サムネールを表示できません
	    </div>)
      }

    return (
	<img
	    src={url}
	    alt={alt}
	    className={`${ className } rounded border border-border object-cover`}
	    onError={() => setFailed (true)}/>)
}

export default ThumbnailPreview