import React, { ReactElement, ReactNode } from 'react';
import { ParagraphProps } from '../Paragraph';
import { UsersProps } from '../Users/types.d';

import { AvatarProps } from '../Avatar';
import { Menu } from '../Menu';

export type CardTagType = {
  icon?: ReactElement;
  text: string;
  color: 'gray' | 'orange';
};

export type CardTagsProps = {
  data: CardTagType[];
};

export type CardParameterType = {
  icon?: React.ReactNode;
  // text: string;
  style?: React.CSSProperties;
  className?: string;
  count?: number;
  textSize?: ParagraphProps['size'];
  children: React.ReactNode;
};

export type CardUsersType = {
  data: AvatarProps[];
  customProps?: UsersProps;
  length?: number;
  children?: React.ReactNode;
};

export type CardProps = {
  className?: string;
  children?: ReactNode;
  view?: 'column' | 'row';
  isSelected?: boolean;
  logo?: string | ReactElement;
  menu?: () => ReactElement<typeof Menu>;
  onClick?: () => void;
  mainContainerWidth?: number | string;
  size?: 'small' | 'big';
  style?: React.CSSProperties;
  subTitle?: React.ReactNode;
  title?: React.ReactNode;
  rightContainer?: {
    component?: React.ReactElement;
    width?: number | string;
    fullHeight?: boolean;
    flexNumber?: number;
  };
};

export type CardParametersGridProps = {
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
};
