import Image from "next/image";
import styles from "@/features/predictions/styles/predictions.module.css";

type PredictionTileBaseProps = {
  title: string;
  description?: string | null;
  badge?: string;
  favorite?: boolean;
  dirty: boolean;
  saving: boolean;
  disabled?: boolean;
  showSubmitButton?: boolean;
  successMessage?: string;
  errorMessage?: string;
  basePoints?: number;
  iconSrc?: string;
  onSubmit: () => void;
  children: React.ReactNode;
};

export function PredictionTileBase({
  title,
  description,
  badge,
  favorite,
  dirty,
  saving,
  disabled,
  showSubmitButton = true,
  successMessage,
  errorMessage,
  basePoints,
  iconSrc,
  onSubmit,
  children,
}: PredictionTileBaseProps) {
  return (
    <article className={`${styles.tile} ${favorite ? styles.tileFavorite : ""}`}>
      <header className={styles.tileHeader}>
        {iconSrc ? (
          <Image src={iconSrc} alt="" width={48} height={48} className={styles.tileIcon} />
        ) : null}
        <div>
          <h3>{title}</h3>
          {description ? <p>{description}</p> : null}
        </div>
        {badge ? <span className={styles.badge}>{badge}</span> : null}
      </header>

      <div className={styles.tileBody}>{children}</div>

      <footer className={styles.tileFooter}>
        {basePoints && basePoints > 0 ? (
          <span className={styles.pointsLabel}>
            <Image src="/images/pictos/bebe-fille.png" alt="" width={22} height={22} className={styles.pointsLabelIcon} />
            Gagnez {basePoints} Points!
            <Image src="/images/pictos/bebe-garcon.png" alt="" width={22} height={22} className={styles.pointsLabelIcon} />
          </span>
        ) : null}
        {showSubmitButton ? (
          <button className="btn btn-primary" onClick={onSubmit} disabled={saving || disabled}>
            {saving ? "Validation..." : "Valider mon pronostic"}
          </button>
        ) : null}
        {dirty ? <span className={styles.dirty}>Modifications non enregistrées</span> : null}
        {successMessage ? <p className={styles.success}>{successMessage}</p> : null}
        {errorMessage ? <p className={styles.error}>{errorMessage}</p> : null}
      </footer>
    </article>
  );
}