"use client";

import type { FC, HTMLAttributes } from "react";
import { FancyButton } from "../FancyButton";
import { SpinnerIcon } from "../Icons";
import styles from "./PremadeCharacterCard.module.css";

interface PremadeCharacterCardProps extends HTMLAttributes<HTMLDivElement> {
  characterLevel: number;
  characterName: string;
  characterId?: number;
  primaryClassName: string;
  speciesName: string;
  longDescription: string;
  imageUrl: string;
  imageAlt: string;
  createButtonText?: string;
  showProgress: boolean;
  previewLink: string;
  onClaim: () => void;
  disableClaim?: boolean;
}

export const PremadeCharacterCard: FC<PremadeCharacterCardProps> = ({
  characterLevel,
  characterName,
  characterId,
  primaryClassName,
  speciesName,
  longDescription,
  imageUrl,
  imageAlt,
  createButtonText = "Create",
  showProgress,
  previewLink,
  onClaim,
  disableClaim = false,
  ...props
}) => {
  return (
    <div className={styles.container} {...props}>
      <img className={styles.image} src={imageUrl} alt={imageAlt} />
      <h2 className={styles.title} id={characterId?.toString()}>
        {characterName}
      </h2>
      <h3 className={styles.subTitle}>
        Level {characterLevel}: {speciesName}{" "}
        <strong>{primaryClassName}</strong>
      </h3>

      <p className={styles.description}>{longDescription}</p>
      <FancyButton
        className={styles.button}
        color="light"
        href={previewLink}
        aria-label={`Preview ${speciesName} ${primaryClassName}`}
      >
        Preview
      </FancyButton>
      <FancyButton
        className={styles.fancyButton}
        onClick={disableClaim ? undefined : onClaim}
        color={"dark"}
        disabled={disableClaim}
        aria-label={
          showProgress
            ? `Loading ${speciesName} ${primaryClassName}...`
            : `${createButtonText} ${speciesName} ${primaryClassName}`
        }
      >
        {showProgress ? <SpinnerIcon /> : createButtonText}
      </FancyButton>
    </div>
  );
};
