import { Card, CardGroup } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';

export type WorkspaceMetricRailItem = {
  label: string;
  value: ReactNode;
  note: string;
  className?: string;
};

export function WorkspaceMetricRail({
  ariaLabel,
  primary,
  secondary,
  className,
  cardClassName,
  secondaryClassName,
  primaryValueClassName
}: {
  ariaLabel: string;
  primary: WorkspaceMetricRailItem;
  secondary: WorkspaceMetricRailItem[];
  className: string;
  cardClassName: string;
  secondaryClassName: string;
  primaryValueClassName?: string;
}) {
  const cardClass = (item: WorkspaceMetricRailItem, primaryCard = false) => [
    cardClassName,
    primaryCard ? 'is-primary' : '',
    item.className ?? ''
  ].filter(Boolean).join(' ');

  return <Card className={className} aria-label={ariaLabel} bodyStyle={{ padding: 0 }}>
    <Card className={cardClass(primary, true)} bodyStyle={{ padding: 0 }} aria-label={`${primary.label}：${primary.value}；${primary.note}`}>
      <small>{primary.label}</small>
      <strong className={primaryValueClassName}>{primary.value}</strong>
      <span title={primary.note}>{primary.note}</span>
    </Card>
    <CardGroup className={secondaryClassName} type="grid" spacing={0}>
      {secondary.map((item) => <Card className={cardClass(item)} bodyStyle={{ padding: 0 }} aria-label={`${item.label}：${item.value}；${item.note}`} key={item.label}>
        <small>{item.label}</small>
        <strong>{item.value}</strong>
        <span title={item.note}>{item.note}</span>
      </Card>)}
    </CardGroup>
  </Card>;
}
