// imports
import Link from 'next/link';
import React from 'react';
import moment from 'moment';

// locals
import Button from '../../Button';
import IconTick from '../../../icons/Tick';
import ApiSignal from '../../../signals/Api';
import { useSignal } from '../../../signal';

/**
 * component workflow
 *
 * @param props 
 * @returns 
 */
const ComponentWorkflowListItem = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  
  // return jsx
  return (
    <div className="flex flex-col flex-1 px-6 py-4 space-y-3 card">
      <div className="flex flex-row items-center space-x-3 w-full">
        <h3 className="flex-1 text-base font-medium truncate"> 
          {props.item?.name || ''}
        </h3>
        {!!props.item?.default && ( 
          <span className="inline-flex flex-shrink-0 items-center rounded-full bg-primary-100 px-1.5 py-0.5 text-xs font-medium text-primary-700 ring-1 ring-inset ring-primary-600/20">
            <IconTick className="mr-1 w-4 h-4" />
            {api.translate('workflow:button.verified', 'Verified')}
          </span>
        )}
        <p className="text-xs text-gray-500 truncate dark:text-gray-50">
          {api.translate('workflow:button.created', `Created ${moment(props.item.createdAt).fromNow()}`, {
            date : moment(props.item?.createdAt).fromNow(),
          })}
        </p>
      </div>

      <div>
        <div className="h-[1px] w-full bg-primary-400 dark:bg-gray-600" />
      </div>

      <div className="flex flex-row justify-end items-center space-x-3">
        <Link href={`/${props.item?.team}/workflows/${props.item?.id}/clone`}>
          <Button
            color="transparent"
          >
            {api.translate('workflow:button.clone', 'Clone')} 
          </Button>
        </Link>
        <Link href={`/${props.item?.team}/workflows/${props.item?.id}`}>
          <Button
            color="primary"
          >
            {api.translate('workflow:button.update', 'Edit')}
          </Button>
        </Link>
      </div>
    </div>
  );
};

/**
 * export default
 */
export default React.memo(ComponentWorkflowListItem);