import type { ReactNode } from 'react'

export function SectionHeader({
  kicker,
  title,
  right,
}: {
  kicker: string
  title: string
  right?: ReactNode
}) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'space-between',
        gap: 16,
        marginBottom: 20,
        paddingBottom: 14,
        borderBottom: '1px solid var(--line-soft)',
      }}
    >
      <div>
        <div
          className="mono uppercase-wide"
          style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em', marginBottom: 4 }}
        >
          <span style={{ color: 'var(--accent)' }}>▣</span> {kicker}
        </div>
        <div className="display" style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>
          {title}
        </div>
      </div>
      {right}
    </div>
  )
}

export function DataRow({
  label,
  value,
  accent = false,
  mono = true,
}: {
  label: string
  value: ReactNode
  accent?: boolean
  mono?: boolean
}) {
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'baseline',
        padding: '10px 0',
        borderBottom: '1px dashed var(--line-softer)',
        gap: 16,
      }}
    >
      <span
        className="mono uppercase-wide"
        style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.08em' }}
      >
        {label}
      </span>
      <span
        style={{
          fontFamily: mono ? 'var(--f-mono)' : 'var(--f-body)',
          fontSize: 13,
          fontWeight: 500,
          color: accent ? 'var(--accent)' : 'var(--ink)',
          textAlign: 'right',
        }}
      >
        {value}
      </span>
    </div>
  )
}