import React from 'react';

export interface ProductImage {
  image: string;
  [key: string]: any;
}

export interface ListHoverImageProps {
  images: ProductImage[];
  href: string;
  alt: string;
  width?: number;
  height?: number;
  fill?: boolean;
  sizes?: string;
  aspectRatio?: number;
  maxImages?: number;
  fallbackImage?: string;
  className?: string;
  settings?: ListHoverImageSettings;
}

export interface IndicatorProps {
  count: number;
  activeIndex: number;
  onSelect: (index: number) => void;
  customStyles?: ListHoverImageCustomStyles;
  customRenderers?: ListHoverImageCustomRenderers;
}

export interface HoverZoneProps {
  count: number;
  href: string;
  onHover: (index: number) => void;
  customStyles?: ListHoverImageCustomStyles;
}

export interface ListHoverImageCustomStyles {
  container?: string;
  imageWrapper?: string;
  image?: string;
  hoverZoneContainer?: string;
  hoverZone?: string;
  indicatorContainer?: string;
  indicatorList?: string;
  indicator?: string;
  indicatorActive?: string;
}

export interface ListHoverImageCustomRenderers {
  renderImage?: (props: {
    src: string;
    alt: string;
    width?: number;
    height?: number;
    fill?: boolean;
    sizes?: string;
    aspectRatio?: number;
  }) => React.ReactNode;
  renderIndicator?: (props: {
    count: number;
    activeIndex: number;
    onSelect: (index: number) => void;
  }) => React.ReactNode;
  renderIndicatorDot?: (props: {
    index: number;
    isActive: boolean;
    onClick: () => void;
  }) => React.ReactNode;
}

export interface ListHoverImageSettings {
  maxImages?: number;
  fallbackImage?: string;
  customStyles?: ListHoverImageCustomStyles;
  customRenderers?: ListHoverImageCustomRenderers;
  theme?: {
    indicatorSize?: string;
    indicatorActiveColor?: string;
    indicatorBorderColor?: string;
    indicatorBorderRadius?: string;
  };
}