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

// locals
import ApiSignal from '../../../signals/Api';
import { useSignal } from '../../../signal';
import { current as TeamSignal } from '../../../signals/Teams';

const ComponentSkillListItem = (props = {}) => {
  const [api] = useSignal(ApiSignal);
  const [team] = useSignal(TeamSignal);

  return (
    <div className="overflow-hidden card">
      {/* Header Section */}
      <div className="p-6 space-y-4">
        <div className="flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <h3 className="text-lg font-semibold">{props.item?.name}</h3>
            {props.item?.default && (
              <span className="inline-flex items-center px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">
                {api.translate('skill:button.verified', 'Verified')}
              </span>
            )}
          </div>
          <span className="px-2 py-1 text-xs bg-gray-100 rounded-full dark:bg-gray-700">
            ID: {props.item?.id?.slice(0, 8)}
          </span>
        </div>

        <p className="text-sm">{props.item?.description}</p>
      </div>

      {/* Footer with Actions */}
      <div className="border-t border-gray-200 dark:border-gray-700">
        <div className="flex divide-x divide-gray-200 dark:divide-gray-700">
          {props.item?.team === team?.id && (
            <Link
              href={`/${props.item?.team}/skills/${props.item?.id}`}
              className="flex-1 px-4 py-3 text-sm font-medium text-center"
            >
              {api.translate('skill:button.update', 'Update')}
            </Link>
          )}
        </div>
      </div>
    </div>
  );
};

export default React.memo(ComponentSkillListItem);