import * as React from 'react'

import { type MetricTileTone } from '../../display/metric-tile'
import { cn } from './utils'

export interface MetricTileProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: string | number
  icon?: React.ReactNode
  detail?: React.ReactNode
  sparkline?: React.ReactNode
  tone?: MetricTileTone
}

export function MetricTile({
  className,
  label,
  value,
  icon,
  detail,
  sparkline,
  tone = 'default',
  ...props
}: MetricTileProps) {
  return (
    <div
      data-slot="metric-tile"
      className={cn('cmm-metric-tile', `cmm-metric-tile--tone-${tone}`, className)}
      {...props}
    >
      <div className="cmm-metric-tile__header">
        {icon !== undefined ? (
          <span className="cmm-metric-tile__icon" aria-hidden="true">
            {icon}
          </span>
        ) : null}
        <span className="cmm-metric-tile__label">{label}</span>
      </div>
      <div className="cmm-metric-tile__value">
        {typeof value === 'number' ? String(value) : value}
      </div>
      {detail !== undefined ? <div className="cmm-metric-tile__detail">{detail}</div> : null}
      {sparkline !== undefined ? (
        <div className="cmm-metric-tile__sparkline">{sparkline}</div>
      ) : null}
    </div>
  )
}
