import React from 'react';

interface InlineTableProps {
  rows: Array<{
    label: string;
    value: React.ReactNode;
    href?: string;
    sentiment?: 'positive' | 'negative' | 'neutral';
  }>;
  labelWidth?: 'narrow' | 'medium' | 'wide';
  columns?: 1 | 2;
}

export const InlineTable: React.FC<InlineTableProps> = ({
  rows,
  labelWidth = 'medium',
  columns = 1,
}) => {
  const labelWidthClasses = {
    narrow: 'w-24',
    medium: 'w-32',
    wide: 'w-48',
  };

  const sentimentClasses = {
    positive: 'text-positive',
    negative: 'text-negative',
    neutral: 'text-term-text',
  };

  if (columns === 2) {
    const halfLength = Math.ceil(rows.length / 2);
    const leftRows = rows.slice(0, halfLength);
    const rightRows = rows.slice(halfLength);

    return (
      <div className="grid grid-cols-2 gap-6">
        <dl className="space-y-2">
          {leftRows.map((row, index) => (
            <div key={`left-${index}`} className="flex items-start justify-between gap-4 border-b border-term-border-subtle py-2 last:border-0">
              <dt className={`text-label-xs ${labelWidthClasses[labelWidth]} text-term-text-tertiary font-mono uppercase tracking-[0.18em] flex-shrink-0`}>
                {row.label}
              </dt>
              <dd className={`text-right text-sm font-mono ${
                row.sentiment ? sentimentClasses[row.sentiment] : 'text-term-text'
              }`}>
                {row.href ? (
                  <a
                    className="text-info transition-colors hover:text-term-text"
                    href={row.href}
                    rel="noreferrer"
                    target="_blank"
                  >
                    {row.value}
                  </a>
                ) : (
                  row.value
                )}
              </dd>
            </div>
          ))}
        </dl>
        <dl className="space-y-2">
          {rightRows.map((row, index) => (
            <div key={`right-${index}`} className="flex items-start justify-between gap-4 border-b border-term-border-subtle py-2 last:border-0">
              <dt className={`text-label-xs ${labelWidthClasses[labelWidth]} text-term-text-tertiary font-mono uppercase tracking-[0.18em] flex-shrink-0`}>
                {row.label}
              </dt>
              <dd className={`text-right text-sm font-mono ${
                row.sentiment ? sentimentClasses[row.sentiment] : 'text-term-text'
              }`}>
                {row.href ? (
                  <a
                    className="text-info transition-colors hover:text-term-text"
                    href={row.href}
                    rel="noreferrer"
                    target="_blank"
                  >
                    {row.value}
                  </a>
                ) : (
                  row.value
                )}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    );
  }

  return (
    <dl className="space-y-0">
      {rows.map((row, index) => (
        <div key={index} className="flex items-start justify-between gap-4 border-b border-term-border-subtle py-2 last:border-0">
          <dt className={`text-label-xs ${labelWidthClasses[labelWidth]} text-term-text-tertiary font-mono uppercase tracking-[0.18em] flex-shrink-0`}>
            {row.label}
          </dt>
          <dd className={`text-right text-sm font-mono ${
            row.sentiment ? sentimentClasses[row.sentiment] : 'text-term-text'
          }`}>
            {row.href ? (
              <a
                className="text-info transition-colors hover:text-term-text"
                href={row.href}
                rel="noreferrer"
                target="_blank"
              >
                {row.value}
              </a>
            ) : (
              row.value
            )}
          </dd>
        </div>
      ))}
    </dl>
  );
};
