EuiStat with Link

EuiStat.tsx

import {
  EuiButtonEmpty,
  EuiFlexGroup,
  EuiFlexItem,
  EuiPanel,
  EuiStat,
} from '@elastic/eui';

interface ButtonProps {
  href: string;
  label: string;
}
interface DescriptionProps {
  label: string;
  button?: ButtonProps;
}
export default function Home() {
  const Description: React.FC<DescriptionProps> = ({ button, label }) => (
    <EuiFlexGroup alignItems="center" gutterSize="xs">
      <EuiFlexItem>
        {label}
      </EuiFlexItem>
      {button && (
        <EuiFlexItem grow={false}>
          <EuiButtonEmpty size="s" flush="both" href="/#" color="primary">{button.label}</EuiButtonEmpty>
        </EuiFlexItem>
      )}
    </EuiFlexGroup>
  )
  return (
    <EuiFlexGroup>
      <EuiFlexItem>
        <EuiPanel color="primary">
          <EuiStat description={<Description label="Ingestion method" />} title="Web crawler" />
        </EuiPanel>
      </EuiFlexItem>
      <EuiFlexItem>
        <EuiPanel color="subdued">
          <EuiStat description={<Description label="Documents" button={{ href:"/#", label: 'View all' }} />} title="42,108" />
        </EuiPanel>
      </EuiFlexItem>
      <EuiFlexItem>
        <EuiPanel color="subdued">
          <EuiStat description={<Description label="Last updated" button={{ href: "/#", label: 'View logs' }} />} title="3 Hours ago" />
        </EuiPanel>
      </EuiFlexItem>
    </EuiFlexGroup>
  )
}