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

interface RevisionInstrumentCardProps {
  title: string;
  subtitle?: string;
  icon: string;
  iconColor: string;
  iconBgColor: string;
  onClick: () => void;
  style?: React.CSSProperties;
}

export const RevisionInstrumentCard: React.FC<RevisionInstrumentCardProps> = ({
  title,
  subtitle,
  icon,
  iconColor,
  iconBgColor,
  onClick,
  style,
}) => {
  return (
    <div
      onClick={onClick}
      style={{
        background: '#ffffff',
        border: 'none',
        borderRadius: '14px',
        padding: '14px 10px',
        textAlign: 'center',
        cursor: 'pointer',
        boxShadow: 'none',
        transition: 'transform 0.15s ease',
        ...style,
      }}
      className="ion-activatable"
    >
      <div
        style={{
          width: '36px',
          height: '36px',
          borderRadius: '10px',
          background: iconBgColor,
          color: iconColor,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          margin: '0 auto 8px auto',
        }}
      >
        <IonIcon icon={icon} style={{ fontSize: '18px' }} />
      </div>
      <span
        style={{
          fontSize: '0.8rem',
          fontWeight: '700',
          color: 'var(--ion-color-dark)',
          display: 'block',
        }}
      >
        {title}
      </span>
      {subtitle && (
        <span
          style={{
            fontSize: '0.65rem',
            color: 'var(--ion-color-medium)',
            display: 'block',
            marginTop: '2px',
          }}
        >
          {subtitle}
        </span>
      )}
    </div>
  );
};

export default RevisionInstrumentCard;