import { ProfileWithUsageLimits } from "../../types/profile-selector-types";

interface ProfileOptionProps extends Omit<ProfileWithUsageLimits, "arn"> {
	accountId: string;
	region: string;
	isSelected: boolean;
	onClick: () => void;
}

export function ProfileOption({
	accountId,
	name,
	region,
	subscriptionName,
	usages,
	isSelected,
	onClick,
}: ProfileOptionProps): React.JSX.Element {
	return (
		<div
			className={`kiro-profile-option${
				isSelected ? " kiro-profile-option-selected" : ""
			}`}
			onClick={onClick}
		>
			<div>
				<p className="kiro-profile-name">{name}</p>
				<p>{subscriptionName}</p>
				{usages?.map(({ currentUsage, usageLimit }) => (
					<p>{`${currentUsage} used / ${usageLimit} covered in plan`}</p>
				))}
			</div>
			<div>
				<p>{accountId}</p>
				<p>{region}</p>
			</div>
		</div>
	);
}
