import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import type { ReactShapeConfig } from '@antv/x6-react-shape';

const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
  const data = node?.getData() || {};
  const { t } = useTranslation()

  return (
    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
      'rb:border-[#155EEF]': data.isSelected,
      'rb:border-[#DFE4ED]': !data.isSelected
    })}>
      <div className="rb:flex rb:items-center rb:justify-between">
        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
          <img src={data.icon} className="rb:w-5 rb:h-5" />
          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
        </div>

        <div
          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
          onClick={(e) => {
            e.stopPropagation()
            node.remove()
          }}
        ></div>
      </div>

      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-7">{t('workflow.clickToConfigure')}</div>
    </div>
  );
};

export default ConditionNode;