import React from 'react';
import clsx from 'clsx';
interface Segment {
    percentage: number;
    subtitle: string;
    color: string;
}
interface SegmentedProgressBarProps {
    segments: Segment[];
    height?: number;
    className?: string;
}
const SegmentedProgressBar: React.FC<SegmentedProgressBarProps> = ({ segments, height=15, className="" }) => {
    return (
        <div className={className}>
            <div className="relative flex rounded-full overflow-hidden bg-gray-200" style={{height: `${height}px`}}>
                {segments.map((segment, index) => (
                    <div
                        key={index}
                        className={clsx(
                            'h-full opacity-50',
                            'transition-all duration-500 ease-out',
                            `bg-${segment.color}`,
                            {
                                'rounded-l-full': index === 0,
                                'rounded-r-full': index === segments.length - 1,
                                'rounded-none': index !== 0 && index !== segments.length - 1
                            }
                        )}
                        style={{width: `${segment.percentage}%`}}
                    ></div>
                ))}
            </div>
            <div className="mt-2 flex text-sm justify-between">
                {segments.map((segment, index) => (
                    <div
                        key={index}
                        className="flex flex-col text-center w-fit"
                    >
                        <span className={clsx('font-semibold',`text-${segment.color}`)}>{segment.subtitle}</span>
                        <span>{`${segment.percentage}%`}</span>
                    </div>
                ))}
            </div>
        </div>
    );
};
export default SegmentedProgressBar;