export type ModalSheetProps = {
  children: React.ReactNode;
  isOpen: boolean;
  closeModal: () => void;
  desktopWidth?: number;
  mobileFullHeight?: number;
  animationDuration?: number;
  headerProps: ModalSheetHeaderProps;
  footerProps?: ModalSheetFooterProps;
  showOverlay?: boolean;
};

export type ModalSheetHeaderProps = {
  headerVariant?: ModalSheetHeaderVariant;
  headerContent: React.ReactNode;
  handleHeaderClick?: () => void;
};

export type ModalSheetFooterProps = {
  footerContent: React.ReactNode;
  footerClassName?: string;
};

export type ModalSheetHeaderVariant = 'primary';

export type CloseIconVariant = 'light' | 'tertiary' | 'dark';
export type ModalSheetCloseIconProps = {
  closeIconVariant: CloseIconVariant;
  closeIcon?: React.ReactNode;
  closeModal?: () => void;
  iconSize?: string;
};

export type SearchFilterProps = {
  filters: SearchFilterDatum[];
  selectFilterItem: SelectFilterItem;
  clearAllFilters: () => void;
  productCount: number;
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  applyFiltersUnchangedClasses: string;
  applyFiltersChangedClasses: string;
  headerContent?: React.ReactNode;
  footerContent?: React.ReactNode;
  filterButtonText?: string; // New prop for custom button text
  headerClassName?: string;
  radioButtonFillColor: string;
  radioButtonHoverColor?: string;
  radioButtonUncheckedBorderColor?: string;
  filterCloseIconVariant: CloseIconVariant;
};

export type SelectFilterItem = ({
  filterId,
  filterItemId,
  isSelected,
  displayName,
}: {
  filterId: string;
  filterItemId: string;
  isSelected: boolean;
  displayName: string;
}) => void;

export type SelectedFilterItemDatum = {
  filterId: string;
  filterItemId: string;
};

export type SearchFilterDatum = {
  filterId: string;
  displayName: string;
  items: SearchFilterItemDatum[];
};

export type SearchFilterItemDatum = {
  filterItemId: string;
  displayName: string;
  productCount: number;
  isSelected: boolean;
};

export type SearchFilterHeaderProps = {
  closeModal: () => void;
  productCount: number;
  headerClassName: string;
  filterCloseIconVariant: CloseIconVariant;
};

export type FilterProps = {
  filter: SearchFilterDatum;
  selectFilterItem: SelectFilterItem;
  radioButtonFillColor?: string;
  radioButtonHoverColor?: string;
  radioButtonUncheckedBorderColor?: string;
};

export type FilterItemProps = {
  filterId: string;
  filterItem: SearchFilterItemDatum;
  selectFilterItem: SelectFilterItem;
};

export type FilterFooterProps = {
  closeModal: () => void;
  clearAllFilters: () => void;
  filterCount: number;
  hasFiltersChanged: boolean;
  applyFiltersUnchangedClasses: string;
  applyFiltersChangedClasses: string;
};
