'use client';

import React from 'react';
import { useBusinessRuleMeta } from './BusinessRulesContext';

const BusinessRuleLink = ({ uid, label, className }: { uid?: string; label: string; className?: string }) => {
  const href = uid ? `#rule-${uid}` : undefined;
  const meta = useBusinessRuleMeta(uid);
  const tooltip = meta && (meta?.category || meta?.likert_label)
    ? `${meta.category || ''}${meta.category && meta.likert_label ? ' - ' : ''}${meta.likert_label || ''}`
    : undefined;
  if (!href) return <span className={className} style={{ color: 'var(--text-secondary)' }}>{label}</span>;
  return (
    <span className={'relative inline-flex items-center group'}>
      <a href={href} className={className || 'underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>
        {label}
      </a>
      {tooltip && (
        <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-72">
          <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, fontSize: 12 }}>
            <div style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>
              <span className='font-semibold'>{meta?.category || ''} | </span> <span>{meta?.likert_label || ''}</span>
            </div>
          </div>
        </div>
      )}
    </span>
  );
};

export default BusinessRuleLink;