'use client'

import { useState } from 'react'

export function TemplatesTab() {
  const [templates] = useState([
    { id: '1', name: 'Eingangsbestaetigung', category: 'Standard', usageCount: 45 },
    { id: '2', name: 'Terminbestaetigung', category: 'Termine', usageCount: 23 },
    { id: '3', name: 'Elternbrief-Vorlage', category: 'Eltern', usageCount: 67 },
  ])

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Vorlagen</h2>
          <p className="text-sm text-slate-500">Verwalten Sie Antwort-Templates</p>
        </div>
        <button className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 flex items-center gap-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Vorlage erstellen
        </button>
      </div>

      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
        <table className="min-w-full divide-y divide-slate-200">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Verwendet</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {templates.map((template) => (
              <tr key={template.id} className="hover:bg-slate-50">
                <td className="px-6 py-4 text-sm font-medium text-slate-900">{template.name}</td>
                <td className="px-6 py-4">
                  <span className="px-2 py-1 bg-slate-100 text-slate-700 text-xs rounded">{template.category}</span>
                </td>
                <td className="px-6 py-4 text-sm text-slate-500">{template.usageCount}x</td>
                <td className="px-6 py-4 text-right">
                  <button className="text-blue-600 hover:text-blue-800 text-sm font-medium">Bearbeiten</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}