import React from 'react';
import { Link } from 'react-router-dom';

interface StatCardProps {
  title: string;
  value: string | number;
  change?: string;
  changeType?: 'positive' | 'negative' | 'neutral';
  icon?: React.ElementType;
  iconColor?: string;
  iconBg?: string;
  href?: string;
}

export function StatCard({
  title,
  value,
  change,
  changeType = 'neutral',
  icon: Icon,
  iconBg = 'bg-brand-100 text-brand-600',
  href,
}: StatCardProps) {
  const changeColors = {
    positive: 'text-success',
    negative: 'text-error',
    neutral: 'text-surface-500',
  };

  const cardContent = (
    <div className="flex items-start justify-between">
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-surface-500 truncate">{title}</p>
        <p className="mt-1 text-xl sm:text-2xl font-semibold text-surface-900 truncate">{value}</p>
        {change && (
          <p className={`mt-1 text-xs font-medium ${changeColors[changeType]}`}>
            {change}
          </p>
        )}
      </div>
      {Icon && (
        <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${iconBg}`}>
          <Icon className="h-5 w-5" />
        </div>
      )}
    </div>
  );

  const containerClasses = "rounded-xl border border-surface-200 bg-white p-4 sm:p-5 transition-shadow hover:shadow-md";

  if (href) {
    return (
      <Link to={href} className={`${containerClasses} block no-underline cursor-pointer transition-colors hover:border-brand-300`}>
        {cardContent}
      </Link>
    );
  }

  return <div className={containerClasses}>{cardContent}</div>;
}