'use client'

import { CATEGORIES, EmailTemplate } from '../_types'
import { TemplateCard } from './TemplateCard'

interface TemplatesTabProps {
  templates: EmailTemplate[]
  loading: boolean
  selectedCategory: string | null
  onCategoryChange: (cat: string | null) => void
  onEdit: (t: EmailTemplate) => void
  onInitialize: () => void
}

export function TemplatesTab({
  templates, loading, selectedCategory, onCategoryChange, onEdit, onInitialize,
}: TemplatesTabProps) {
  return (
    <div className="space-y-4">
      {/* Category Pills */}
      <div className="flex flex-wrap gap-2">
        <button
          onClick={() => onCategoryChange(null)}
          className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
            !selectedCategory ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
          }`}
        >
          Alle
        </button>
        {Object.entries(CATEGORIES).map(([key, cat]) => (
          <button
            key={key}
            onClick={() => onCategoryChange(key)}
            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
              selectedCategory === key ? 'bg-purple-600 text-white' : `${cat.bgColor} ${cat.color} hover:opacity-80`
            }`}
          >
            {cat.label}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="text-center py-12 text-gray-500">Lade Templates...</div>
      ) : templates.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-gray-500 mb-4">Keine Templates vorhanden.</p>
          <button
            onClick={onInitialize}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            Standard-Templates erstellen
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {templates.map(t => (
            <TemplateCard key={t.id} template={t} onEdit={() => onEdit(t)} />
          ))}
        </div>
      )}
    </div>
  )
}