import { UsageBreakdown } from "../../../types/account-dashboard-types";
import {
	formatResourceType,
	getProgressColor,
} from "../../../utils/subscription-utils";

interface UsageBreakdownItemProps {
	item: UsageBreakdown;
	isDisabled?: boolean;
	shouldExcludeProgressBars?: boolean;
}

export function UsageBreakdownItem({
	item,
	isDisabled,
	shouldExcludeProgressBars,
}: UsageBreakdownItemProps): React.JSX.Element {
	const { currentUsage, displayNamePlural, percentageUsed, type, usageLimit } =
		item;

	return (
		<div
			className={`kiro-usage-breakdown${
				isDisabled ? " kiro-usage-breakdown--disabled" : ""
			}`}
		>
			<div className="kiro-account-dashboard-row">
				<span className="kiro-account-dashboard-label">
					{displayNamePlural || formatResourceType(type) || "Usage"}
				</span>
				<span className="kiro-usage-breakdown-stats">
					{isDisabled
						? "Not available in current plan"
						: `${Math.min(
								currentUsage,
								usageLimit
						  ).toLocaleString()} used / ${usageLimit.toLocaleString()} covered in plan`}
				</span>
			</div>
			{!shouldExcludeProgressBars && (
				<div className="kiro-progress-bar-container">
					{isDisabled ? (
						<div className="kiro-progress-bar" />
					) : (
						<div
							className={`kiro-progress-bar ${getProgressColor(
								percentageUsed
							)}`}
							style={{ width: `${Math.min(percentageUsed, 100)}%` }}
						/>
					)}
				</div>
			)}
		</div>
	);
}
