export default function ProgressBar({
    percent,
    className = '',
}: {
    percent: number;
    className?: string;
}) {
    const clamped = Math.max(0, Math.min(100, percent));

    return (
        <div className={`h-1.5 w-full overflow-hidden rounded-full bg-surface-container-high ${className}`}>
            <div
                className="h-full rounded-full bg-jgcp-navy transition-all duration-300"
                style={{ width: `${clamped}%` }}
            />
        </div>
    );
}