import { CarouselProps } from '@wix/design-system';
import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';

// Re-export Offer for external consumers
export type { Offer };

/**
 * Base props passed to card components
 */
export interface BaseCardComponentProps {
  /** Index of the card in the list */
  index: number;
  /** Total number of offers received from the dealer service */
  totalOffers: number;
}

/**
 * Props passed to the renderCard function
 */
export interface SuggestionsCardProps extends BaseCardComponentProps {
  /** The offer data from the dealer service */
  offer: Offer;
}

/**
 * Props for the Suggestions component
 */
export interface SuggestionsProps {
  /**
   * The placement ID to fetch offers for.
   * @external
   */
  placementId: string;
  /**
   * Props to pass to the carousel component.
   * @external
   */
  carouselProps?: CarouselProps;
  /**
   * Render function for each offer card. Return `null` to filter out a card.
   * @external
   */
  renderCard: (props: SuggestionsCardProps) => React.ReactNode | null;
  /**
   * Skeleton component to render when loading.
   * @external
   */
  CardSkeleton?: React.ComponentType<BaseCardComponentProps>;
  /**
   * Number of skeletons to render when loading.
   * @default 4
   * @external
   */
  skeletonsNumber?: number;
  /**
   * Data hook for testing.
   * @default 'suggestions'
   * @external
   */
  dataHook?: string;
  /**
   * Maximum number of items to display inline (Box layout). Above this, Carousel is used.
   * @default 2
   * @external
   */
  maxInlineItems?: number;
}
