import { Button } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';

type MetricActionButtonProps = {
  label: ReactNode;
  value: ReactNode;
  onClick: () => void;
  tone?: string;
  hint?: ReactNode;
  active?: boolean;
  ariaLabel?: string;
};

export function MetricActionButton({
  label,
  value,
  onClick,
  tone = 'default',
  hint,
  active = false,
  ariaLabel
}: MetricActionButtonProps) {
  return <Button
    className={`v2-metric-action is-${tone}${active ? ' is-active' : ''}`}
    theme={active ? 'light' : 'borderless'}
    type="tertiary"
    htmlType="button"
    aria-pressed={active}
    aria-label={ariaLabel}
    onClick={onClick}
  >
    <span className="v2-metric-action-content"><small>{label}</small><strong>{value}</strong>{hint ? <em>{hint}</em> : null}</span>
  </Button>;
}
