import React from 'react';

interface KeyValueItem {
  label: string;
  value: string;
  unit?: string;
}

interface VoltageTable {
  voltageLabel: string;
  metaItems: KeyValueItem[];
  columns: Array<{ key: string; label: string }>;
  rows: Array<{ configuration: string; cells: string[] }>;
}

interface ProductTechnicalDataProps {
  data: {
    technicalItems: KeyValueItem[];
    voltageTables: VoltageTable[];
  };
}

export default function ProductTechnicalData({ data }: ProductTechnicalDataProps) {
  if (!data) return null;
  const { technicalItems = [], voltageTables = [] } = data;

  return (
    <div className="space-y-8">
      {technicalItems.length > 0 && (
        <div className="bg-neutral-light p-6 rounded-lg shadow-sm">
          <h3 className="text-xl font-semibold mb-4">General Data</h3>
          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
            {technicalItems.map((item, idx) => (
              <div key={idx} className="flex flex-col border-b border-neutral-dark pb-2 last:border-0">
                <dt className="text-sm text-text-secondary">{item.label}</dt>
                <dd className="text-base font-medium text-text-primary">
                  {item.value} {item.unit && <span className="text-sm text-text-secondary ml-1">{item.unit}</span>}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      )}

      {voltageTables.map((table, idx) => (
        <div key={idx} className="bg-neutral-light p-6 rounded-lg shadow-sm overflow-hidden">
          <h3 className="text-xl font-semibold mb-4">
            {table.voltageLabel !== 'Voltage unknown' && table.voltageLabel !== 'Spannung unbekannt' 
              ? table.voltageLabel 
              : 'Technical Specifications'}
          </h3>
          
          {table.metaItems.length > 0 && (
            <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-6 bg-neutral p-4 rounded">
              {table.metaItems.map((item, mIdx) => (
                <div key={mIdx}>
                  <dt className="text-xs text-text-secondary uppercase tracking-wider">{item.label}</dt>
                  <dd className="font-medium">{item.value} {item.unit}</dd>
                </div>
              ))}
            </dl>
          )}

          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-neutral-dark">
              <thead className="bg-neutral">
                <tr>
                  <th scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider sticky left-0 bg-neutral z-10">
                    Configuration
                  </th>
                  {table.columns.map((col, cIdx) => (
                    <th key={cIdx} scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider whitespace-nowrap">
                      {col.label}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-neutral-dark">
                {table.rows.map((row, rIdx) => (
                  <tr key={rIdx} className="hover:bg-neutral-light transition-colors">
                    <td className="px-3 py-3 text-sm font-medium text-text-primary sticky left-0 bg-white z-10 whitespace-nowrap">
                      {row.configuration}
                    </td>
                    {row.cells.map((cell, cellIdx) => (
                      <td key={cellIdx} className="px-3 py-3 text-sm text-text-secondary whitespace-nowrap">
                        {cell}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}