'use client';

import { useState } from 'react';
import { CoverPlaceholder } from './CoverPlaceholder';

type Props = { src?: string; alt?: string; size: number };

export function Cover({ src, alt, size }: Props) {
  const [errored, setErrored] = useState(false);
  if (!src || errored) return <CoverPlaceholder size={size} />;
  return (
    <img
      src={src}
      alt={alt ?? ''}
      width={size}
      height={size}
      loading="lazy"
      decoding="async"
      onError={() => setErrored(true)}
      className="block rounded-md object-cover"
      style={{ width: size, height: size }}
    />
  );
}