import type { Study } from '../types';
import { Badge } from './Badge';

interface StudyCardProps {
  study: Study;
  isActive: boolean;
  onClick: () => void;
}

export function StudyCard({ study, isActive, onClick }: StudyCardProps) {
  const percentage = study.progress.total > 0
    ? (study.progress.current / study.progress.total) * 100
    : 0;

  const statusVariant = study.status === 'completed'
    ? 'success'
    : study.status === 'running'
    ? 'info'
    : 'warning';

  return (
    <div
      className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
        isActive
          ? 'bg-primary-900 border-l-4 border-primary-400'
          : 'bg-dark-500 hover:bg-dark-400'
      }`}
      onClick={onClick}
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="font-semibold text-dark-50 text-sm">{study.name}</h3>
        <Badge variant={statusVariant}>
          {study.status}
        </Badge>
      </div>

      <div className="text-xs text-dark-200 mb-2">
        {study.progress.current} / {study.progress.total} trials
        {study.best_value !== null && (
          <span className="ml-2">• Best: {study.best_value.toFixed(4)}</span>
        )}
      </div>

      <div className="w-full h-2 bg-dark-700 rounded-full overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-primary-600 to-primary-400 transition-all duration-300"
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
}