import { Toggle } from '@/components/Toggle';

export type SubscriptionsListProps = {
    items?: { id: string; name: string; isActive: boolean }[];
    onChange?: React.ChangeEventHandler<HTMLInputElement>;
};

export function SubscriptionsList(props: SubscriptionsListProps) {
    return props.items && props.items.length > 0 ? (
        <div className="flex flex-col gap-2">
            {props.items?.map(item => {
                return (
                    <div
                        className="flex items-center justify-between"
                        key={item.id}
                    >
                        <label htmlFor={item.id} className="text-gray-900">
                            {item.name}
                        </label>
                        <Toggle
                            id={item.id}
                            name={item.id}
                            checked={item.isActive}
                            onChange={props.onChange}
                            data-testid={`subscription-toggle-${item.id}`}
                        />
                    </div>
                );
            })}
        </div>
    ) : null;
}