'use client'
import React from 'react'
import { Button } from '@/components/ui/Button'

interface ComparisonDimension {
  label: string
  a: string
  b: string
}

interface ComparisonCardContent {
  type: 'comparison_card'
  subject_a: string
  subject_b: string
  dimensions: ComparisonDimension[]
}

interface Props {
  content: ComparisonCardContent
  onComplete: () => void
}

export function ComparisonCard({ content, onComplete }: Props) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
        <table
          style={{
            width: '100%',
            borderCollapse: 'collapse',
            fontSize: 'var(--t-body)',
            minWidth: '320px',
          }}
        >
          <thead>
            <tr>
              <th
                style={{
                  width: '28%',
                  padding: 'var(--s-2) var(--s-3)',
                  textAlign: 'left',
                  fontSize: 'var(--t-label)',
                  fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase',
                  letterSpacing: 'var(--label-ls)',
                  color: 'var(--fg-muted)',
                  border: '1px solid var(--cream)',
                  background: 'var(--bg-warm)',
                }}
              >
                Dimension
              </th>
              <th
                style={{
                  width: '36%',
                  padding: 'var(--s-2) var(--s-3)',
                  textAlign: 'left',
                  fontWeight: 700,
                  color: 'var(--teal)',
                  border: '1px solid var(--cream)',
                  background: 'var(--bg-warm)',
                }}
              >
                {content.subject_a}
              </th>
              <th
                style={{
                  width: '36%',
                  padding: 'var(--s-2) var(--s-3)',
                  textAlign: 'left',
                  fontWeight: 700,
                  color: 'var(--accent)',
                  border: '1px solid var(--cream)',
                  background: 'var(--bg-warm)',
                }}
              >
                {content.subject_b}
              </th>
            </tr>
          </thead>
          <tbody>
            {content.dimensions.map((dim, idx) => (
              <tr key={idx} style={{ background: idx % 2 === 0 ? 'var(--bg)' : 'var(--bg-warm)' }}>
                <td
                  style={{
                    padding: 'var(--s-2) var(--s-3)',
                    fontWeight: 600,
                    fontSize: 'var(--t-small)',
                    color: 'var(--fg-muted)',
                    border: '1px solid var(--cream)',
                    verticalAlign: 'top',
                  }}
                >
                  {dim.label}
                </td>
                <td
                  style={{
                    padding: 'var(--s-2) var(--s-3)',
                    border: '1px solid var(--cream)',
                    verticalAlign: 'top',
                    lineHeight: 1.5,
                  }}
                >
                  {dim.a}
                </td>
                <td
                  style={{
                    padding: 'var(--s-2) var(--s-3)',
                    border: '1px solid var(--cream)',
                    verticalAlign: 'top',
                    lineHeight: 1.5,
                  }}
                >
                  {dim.b}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Button variant="primary" onClick={onComplete} style={{ alignSelf: 'flex-end' }}>
        Mark complete
      </Button>
    </div>
  )
}
