import React from 'react';
import { TableListItem, Tag as TagComponent, IconButton, Box, Tooltip, } from '@wix/design-system';
import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
export const TagsListItemView = ({ state, tag, isLastTag, }) => {
    const { translate: t } = useWixPatternsContainer();
    const handleEditClick = () => {
        state.handleEditCtaClick(tag);
    };
    const handleDeleteClick = () => {
        state.deleteTag(tag);
    };
    return (React.createElement(TableListItem, { dataHook: "manage-tags-modal-tag-row", options: [
            {
                value: (React.createElement(TagComponent, { id: tag.id, removable: false, ellipsisProps: { enterDelay: 500 }, dataHook: "manage-tags-modal-tag" }, tag.name)),
                width: '1fr',
                align: 'left',
            },
            {
                value: (React.createElement(Box, { gap: "SP2", align: "right" },
                    React.createElement(Tooltip, { content: t('cairo.tags.manageTags.modal.list.action.rename.CTA') },
                        React.createElement(IconButton, { dataHook: "manage-tags-modal-tag-action-edit", size: "small", priority: "secondary", onClick: handleEditClick },
                            React.createElement(EditSmall, null))),
                    React.createElement(Tooltip, { content: t('cairo.tags.manageTags.modal.list.action.delete.CTA') },
                        React.createElement(IconButton, { dataHook: "manage-tags-modal-tag-action-delete", size: "small", priority: "secondary", onClick: handleDeleteClick },
                            React.createElement(DeleteSmall, null))))),
                width: 'max-content',
                align: 'right',
            },
        ], verticalPadding: "tiny", showDivider: !isLastTag }));
};
//# sourceMappingURL=TagListItemView.js.map