import React from 'react';

export const LinearProgress: React.FC<{ value: number; className?: string; }> = ({ value, className }) => (
    <div className={`w-full h-2 rounded-full bg-[--background-tertiary] overflow-hidden ${className || ''}`}>
        <div className="h-full bg-blue-500 transition-all" style={{ width: `${Math.min(100, Math.max(0, value))}%` }} />
    </div>
);

export interface StepProgressProps { current: number; total: number; labels?: string[]; }
export const StepProgress: React.FC<StepProgressProps> = ({ current, total, labels }) => (
    <div>
        <div className="flex justify-between mb-2">
            {Array.from({ length: total }).map((_, i) => (
                <div key={i} className="flex-1 flex flex-col items-center">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold mb-1 ${i <= current ? 'bg-blue-500 text-white' : 'bg-[--background-tertiary] text-[--text-secondary]'}`}>{i + 1}</div>
                    {labels && labels[i] && <span className="text-[10px] text-center px-1 text-[--text-secondary] truncate max-w-[72px]">{labels[i]}</span>}
                </div>
            ))}
        </div>
        <LinearProgress value={((current + 1) / total) * 100} />
    </div>
);

export default { LinearProgress, StepProgress };