'use client'

import { TYPOGRAPHY } from './types'

export default function TypographyTab() {
  return (
    <div className="space-y-6">
      {/* Font Family */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
        <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
          font-family: {TYPOGRAPHY.fontFamily};
        </div>
        <p className="text-sm text-slate-600">
          Inter ist eine moderne, variable Sans-Serif Schrift, optimiert für Bildschirme.
          Sie ist unter der SIL Open Font License verfügbar und frei für kommerzielle Nutzung.
        </p>
      </div>

      {/* Font Weights */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
        <div className="space-y-4">
          {TYPOGRAPHY.weights.map((w) => (
            <div key={w.weight} className="flex items-center gap-6">
              <span
                className="text-2xl w-48"
                style={{ fontWeight: w.weight }}
              >
                The quick brown fox
              </span>
              <div className="flex-1">
                <span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
                <span className="text-sm text-slate-500 ml-4">{w.usage}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Font Sizes */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgrößen</h3>
        <div className="space-y-3">
          {TYPOGRAPHY.sizes.map((s) => (
            <div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3">
              <span className="w-16 text-sm font-mono text-slate-500">{s.name}</span>
              <span className="w-32 text-sm text-slate-600">{s.size}</span>
              <span className="text-sm text-slate-500">{s.usage}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Headings Preview */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Überschriften-Hierarchie</h3>
        <div className="space-y-4">
          <h1 className="text-4xl font-bold text-slate-900">H1: Hauptüberschrift</h1>
          <h2 className="text-3xl font-bold text-slate-900">H2: Abschnittsüberschrift</h2>
          <h3 className="text-2xl font-semibold text-slate-900">H3: Unterabschnitt</h3>
          <h4 className="text-xl font-semibold text-slate-900">H4: Card-Titel</h4>
          <h5 className="text-lg font-medium text-slate-900">H5: Kleiner Titel</h5>
          <h6 className="text-base font-medium text-slate-900">H6: Label</h6>
        </div>
      </div>
    </div>
  )
}
