const MediaCardImage = ({ src, title }: { src: string; title: string }) => {
  const [loaded, setLoaded] = useState(false);

  const handleLoad = () => {
    setLoaded(true);
  };

  return loaded ? (
    <Image
      onLoad={handleLoad}
      src={src}
      alt={title}
      title={title}
      width={200}
      height={144}
      className='pointer-events-none h-full w-full select-none object-cover object-center'
    />
  ) : (
    <Skeleton className='h-full w-full' />
  );
};