'use client'

import { CATEGORY_COLORS } from '../constants'

export function ComponentsTab() {
  return (
    <div className="space-y-6">
      {/* Buttons */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <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 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
        <div className="grid grid-cols-1 md: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 outline-none"
            />
          </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 outline-none"
              />
              <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 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Cards</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer">
            <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">Standard Card mit Hover-Effekt.</p>
          </div>
          <div className="rounded-xl p-4 text-white" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
            <h4 className="font-semibold mb-1">Highlight Card</h4>
            <p className="text-sm text-white/80">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">Sidebar-Style.</p>
          </div>
        </div>
      </div>

      {/* Category Cards */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Cards</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {CATEGORY_COLORS.slice(0, 3).map((cat) => (
            <div
              key={cat.id}
              className="rounded-xl border p-4 hover:shadow-lg transition-all cursor-pointer"
              style={{
                borderColor: cat.shades[0].value,
                backgroundColor: cat.shades[0].value + '40'
              }}
            >
              <div
                className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
                style={{ backgroundColor: cat.main }}
              >
                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h4 className="font-semibold text-slate-900 mb-1">{cat.name.split(' (')[0]}</h4>
              <p className="text-sm text-slate-600">{cat.description}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Badges */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Badges & Tags</h3>
        <div className="flex flex-wrap gap-2 mb-4">
          <span className="px-2.5 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">Primary</span>
          <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Success</span>
          <span className="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">Warning</span>
          <span className="px-2.5 py-1 bg-red-100 text-red-700 text-xs font-medium rounded-full">Danger</span>
          <span className="px-2.5 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">Neutral</span>
        </div>
        <h4 className="font-medium text-slate-700 mb-2 mt-4">Kategorie-Badges</h4>
        <div className="flex flex-wrap gap-2">
          {CATEGORY_COLORS.map((cat) => (
            <span
              key={cat.id}
              className="px-2.5 py-1 text-xs font-medium rounded-full"
              style={{
                backgroundColor: cat.shades[0].value,
                color: cat.shades[3].value
              }}
            >
              {cat.name.split(' (')[0]}
            </span>
          ))}
        </div>
      </div>

      {/* Border Radius */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Border Radius</h3>
        <div className="flex gap-6 items-end">
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-500 rounded"></div>
            <span className="text-xs text-slate-500 mt-2 block">rounded (4px)</span>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-500 rounded-lg"></div>
            <span className="text-xs text-slate-500 mt-2 block">rounded-lg (8px)</span>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-500 rounded-xl"></div>
            <span className="text-xs text-slate-500 mt-2 block">rounded-xl (12px)</span>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-500 rounded-2xl"></div>
            <span className="text-xs text-slate-500 mt-2 block">rounded-2xl (16px)</span>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-primary-500 rounded-full"></div>
            <span className="text-xs text-slate-500 mt-2 block">rounded-full</span>
          </div>
        </div>
      </div>
    </div>
  )
}
