import clsx from "clsx";
import type { ElementType } from "react";

interface NovelItemProps {
  component?: ElementType;
  className?: string;
}

export default function NovelItem(props: NovelItemProps) {
  const { component: Component, className, ...other } = props;

  if (Component) {
    return (
      <Component className={clsx("novel-cover", className)} {...other}>
        <img
          src="https://www.wuxiaworld.com/cdn-cgi/image/fit=contain,quality=75,format=auto/https://cdn.wuxiaworld.com/images/covers/og.jpg?ver=362f12103bcf1ea3fc048174300b89a65643336b"
          alt="Minecraft"
          draggable="false"
          loading="lazy"
        />
      </Component>
    );
  }

  return (
    <a
      href="/minecraft"
      title="Minecraft"
      className={clsx("novel-cover", className)}
      {...other}
    >
      <img
        src="https://www.wuxiaworld.com/cdn-cgi/image/fit=contain,quality=75,format=auto/https://cdn.wuxiaworld.com/images/covers/og.jpg?ver=362f12103bcf1ea3fc048174300b89a65643336b"
        alt="Minecraft"
        draggable="false"
        loading="lazy"
      />
    </a>
  );
}