'use client'

export default function ComponentsTab() {
  return (
    <div className="space-y-6">
      {/* Buttons */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Buttons</h3>
        <div className="flex flex-wrap gap-4 mb-6">
          <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors">
            Primary
          </button>
          <button className="px-6 py-2 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors">
            Secondary
          </button>
          <button className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors">
            Outline
          </button>
          <button className="px-6 py-2 text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-colors">
            Ghost
          </button>
          <button className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors">
            Danger
          </button>
        </div>
        <div className="flex flex-wrap gap-4">
          <button className="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg">
            Small
          </button>
          <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg">
            Medium
          </button>
          <button className="px-8 py-3 bg-primary-600 text-white text-lg font-medium rounded-lg">
            Large
          </button>
        </div>
      </div>

      {/* Inputs */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Standard Input</label>
            <input
              type="text"
              placeholder="Placeholder..."
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Mit Icon</label>
            <div className="relative">
              <input
                type="text"
                placeholder="Suchen..."
                className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
              />
              <svg className="w-5 h-5 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      {/* Cards */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Cards</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg transition-shadow">
            <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
              <svg className="w-5 h-5 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <h4 className="font-semibold text-slate-900 mb-1">Feature Card</h4>
            <p className="text-sm text-slate-600">Beschreibungstext für diese Feature-Karte.</p>
          </div>
          <div className="bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl p-4 text-white">
            <h4 className="font-semibold mb-1">Highlight Card</h4>
            <p className="text-sm text-primary-100">Mit Gradient-Hintergrund.</p>
          </div>
          <div className="bg-slate-900 rounded-xl p-4 text-white">
            <h4 className="font-semibold mb-1">Dark Card</h4>
            <p className="text-sm text-slate-400">Dunkler Hintergrund.</p>
          </div>
        </div>
      </div>

      {/* Badges */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Badges & Tags</h3>
        <div className="flex flex-wrap gap-2">
          <span className="px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded">Primary</span>
          <span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded">Success</span>
          <span className="px-2 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded">Warning</span>
          <span className="px-2 py-1 bg-red-100 text-red-700 text-xs font-medium rounded">Danger</span>
          <span className="px-2 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded">Neutral</span>
          <span className="px-2 py-1 bg-fuchsia-100 text-fuchsia-700 text-xs font-medium rounded">Accent</span>
        </div>
      </div>
    </div>
  )
}
