// imports
import React from 'react';
import moment from 'moment';
import { IconArrowCircleRight } from '@chirper/react/src/icons';

// key
import ApiSignal from '../../../signals/Api';
import { useSignal } from '../../../signal';
import { key as KeySignal } from '../Modal';

/**
 * component node
 *
 * @param props 
 * @returns 
 */
const ComponentKeyListItem = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  const [,setKey] = useSignal(KeySignal);
  
  // return jsx
  return (
    <div className="flex gap-x-6 justify-between items-center py-5 border-b cursor-pointer border-gray-100/10" onClick={() => setKey(props.item)}>
      <div className="flex flex-1 gap-x-4 min-w-0">
        <div className="flex-auto min-w-0">
          <p className="text-sm font-semibold leading-6">{props.item.name}</p>
          <p className="mt-1 text-xs leading-5 text-gray-500 truncate dark:text-gray-50">
            {api.translate('common:button.created', 'Created')} <time dateTime={props.item.createdAt}>{moment(props.item.createdAt).fromNow()}</time>
          </p>
        </div>
      </div>
      <IconArrowCircleRight className="flex-none w-5 h-5 text-gray-400 dark:text-gray-50"  />
    </div>
  );
};

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