import React from 'react';
import { IonIcon } from '@ionic/react';

interface DashboardMetricCardProps {
  label: string;
  value: string;
  hint: string;
  icon: string;
  onClick?: () => void;
}

const DashboardMetricCard: React.FC<DashboardMetricCardProps> = ({
  label,
  value,
  hint,
  icon,
  onClick,
}) => {
  return (
    <div
      onClick={onClick}
      style={{
        background: 'var(--color-surface)',
        borderRadius: '24px',
        padding: '20px',
        flex: '1',
        display: 'flex',
        flexDirection: 'column',
        gap: '12px',
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: '12px',
        }}
      >
        <span
          style={{
            fontSize: '12px',
            fontWeight: '700',
            color: 'var(--color-text-tertiary)',
            textTransform: 'uppercase',
            letterSpacing: '0.05em',
          }}
        >
          {label}
        </span>
        <div
          style={{
            width: '36px',
            height: '36px',
            borderRadius: '12px',
            background: 'var(--color-brand-medium)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
          }}
        >
          <IonIcon
            icon={icon}
            style={{ color: 'var(--color-brand)', fontSize: '18px' }}
          />
        </div>
      </div>
      <div>
        <div
          style={{
            fontSize: '28px',
            fontWeight: '400',
            color: 'var(--color-text-primary)',
            lineHeight: '1',
            fontVariantNumeric: 'tabular-nums',
          }}
        >
          {value}
        </div>
        <div
          style={{
            fontSize: '12px',
            fontWeight: '400',
            color: 'var(--color-text-secondary)',
            marginTop: '8px',
          }}
        >
          {hint}
        </div>
      </div>
    </div>
  );
};

export default DashboardMetricCard;