Atomizer/atomizer-dashboard/frontend/src/components/dashboard/StudyCard.tsx

import { Study } from '../../types';
import clsx from 'clsx';
import { Play, CheckCircle, Clock } from 'lucide-react';

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

export const StudyCard = ({ study, isActive, onClick }: StudyCardProps) => {
  const getStatusIcon = () => {
    switch (study.status) {
      case 'running':
        return <Play className="w-4 h-4 text-green-400 animate-pulse" />;
      case 'completed':
        return <CheckCircle className="w-4 h-4 text-blue-400" />;
      default:
        return <Clock className="w-4 h-4 text-dark-400" />;
    }
  };

  return (
    <div
      onClick={onClick}
      className={clsx(
        'p-4 rounded-lg border cursor-pointer transition-all duration-200',
        isActive
          ? 'bg-primary-900/20 border-primary-500/50 shadow-md'
          : 'bg-dark-800 border-dark-600 hover:bg-dark-700 hover:border-dark-500'
      )}
    >
      <div className="flex items-start justify-between mb-2">
        <h4 className={clsx('font-medium truncate pr-2', isActive ? 'text-primary-100' : 'text-dark-100')}>
          {study.name}
        </h4>
        {getStatusIcon()}
      </div>
      
      <div className="flex items-center justify-between text-xs text-dark-300">
        <span>{study.status}</span>
        <span>
          {study.progress.current} / {study.progress.total} trials
        </span>
      </div>
      
      {/* Progress Bar */}
      <div className="mt-3 h-1.5 w-full bg-dark-700 rounded-full overflow-hidden">
        <div 
          className={clsx(
            "h-full rounded-full transition-all duration-500",
            study.status === 'completed' ? 'bg-blue-500' : 'bg-green-500'
          )}
          style={{ width: `${(study.progress.current / study.progress.total) * 100}%` }}
        />
      </div>
    </div>
  );
};