import type { ReactNode } from 'react';

export function ModelCatalogCard(props: {
  actions?: ReactNode;
  badges?: ReactNode[];
  chips?: string[];
  iconPath?: string;
  iconText: string;
  meta?: string[];
  subtitle: string;
  title: string;
}) {
  return (
    <article className="baseModelCard">
      <div className="providerCatalogLogo">
        {props.iconPath ? <img src={props.iconPath} alt="" /> : props.iconText.slice(0, 2).toUpperCase()}
      </div>
      <div className="baseModelCardBody">
        <div>
          <strong>{props.title}</strong>
          <span>{props.subtitle}</span>
        </div>
        <div className="providerCatalogMeta">
          {props.badges?.map((badge, index) => <span key={`badge-${index}`}>{badge}</span>)}
          {props.meta?.map((item) => <span key={item}>{item}</span>)}
        </div>
        {!!props.chips?.length && (
          <div className="modelAbilityChips">
            {props.chips.map((item) => <span key={item}>{item}</span>)}
          </div>
        )}
      </div>
      {props.actions && <div className="providerCatalogActions">{props.actions}</div>}
    </article>
  );
}