devonthesofa_obsidian-note-status/components/ChangeStatusModal/CurrentStatusChips.tsx

import React from "react";
import { NoteStatus } from "@/types/noteStatus";
import { StatusDisplay } from "../atoms/StatusDisplay";
import { SettingItem } from "../SettingsUI/SettingItem";

interface Props {
	currentStatuses: NoteStatus[];
	onRemoveStatus: (status: NoteStatus) => void;
}

export const CurrentStatusChips: React.FC<Props> = ({
	currentStatuses,
	onRemoveStatus,
}) => {
	return (
		<SettingItem name="Current statuses" vertical>
			<div className="note-status-chips">
				{currentStatuses.map((status) => (
					<StatusDisplay
						key={`${status.templateId || "custom"}:${status.name}`}
						status={status}
						variant="chip"
						removable
						onRemove={() => onRemoveStatus(status)}
					/>
				))}
			</div>
		</SettingItem>
	);
};