import type { ReactNode } from "react";
import type { ButtonProps } from "../button/types";

import type { AnimationType } from "@shared/components/animation-wrapper";

export type CalloutCardType = "simple" | "blog" | "fullImage" | "floatingImage";

export type CalloutCtaProps = ButtonProps & {
  label?: string;
};

export type CalloutItem = {
  /**
   * Optional per-item card type. When provided, overrides the top-level
   * `cardType` for this single item — enables mixed card variants in one
   * Callout (e.g. one full-image + two simple cards).
   */
  cardType?: CalloutCardType;
  // Permissive shape — concrete card components validate their own subset.
  [key: string]: any;
};

export type CalloutProps = {
  /** Outer `<section>` id — anchor link target. */
  anchorId?: string;
  title?: string;
  enableHeading?: boolean;
  subtitle?: string;
  description?: string;
  finePrint?: ReactNode;
  cta?: CalloutCtaProps;
  applyBoxShadow?: boolean;
  cardStackingMobile?: boolean;  
  color?: "dark" | "light";
  /**
   * When `true` (default) cards are laid out in a responsive Tailwind
   * grid sized by `maxCardsPerRow`. When `false` the cards stretch
   * full-width and stack vertically (no inner widths).
   *
   * Accepts a string for backward compatibility with legacy consumers
   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
   * enables grid mode — the string itself is not applied.
   */
  cardsWidth?: boolean | string;
  maxCardsPerRow?: number;
  noGutter?: boolean;
  items: CalloutItem[];
  maxWidth?: boolean;
  /** Top-level card type used when an item does not specify its own. */
  cardType?: CalloutCardType;
  /**
   * Background color token. When omitted the section has no background
   * (preserves prior behavior for existing 0.1.70 consumers).
   */
  backgroundColor?:
    | "cream500"
    | "gray100"
    | "white"
    | "transparent"
    | "blue"
    | "green"
    | "navy"
    | "purple"
    | "yellow";
  /** Raw background CSS value (overrides `backgroundColor` when present). */
  background?: string;
  /** Inline text color override applied to the heading region. */
  textColor?: string;
  /** Extra class names for the outer <section>. */
  containerClassName?: string;
  /** Extra class names for the inner content wrapper. */
  innerClassName?: string;
  /** Disable card hover/tap animations. */
  disableAnimation?: boolean;
  /** Animation type(s) applied to each card. */
  animationType?: AnimationType | AnimationType[];
};