'use client'

interface TemplatesDropdownProps {
  templates: { id: string; name: string; content: string }[]
  onSelect: (content: string) => void
  isDark: boolean
}

export function TemplatesDropdown({ templates, onSelect, isDark }: TemplatesDropdownProps) {
  return (
    <div className={`absolute bottom-full left-0 mb-2 w-64 rounded-2xl border shadow-2xl overflow-hidden z-50 ${
      isDark
        ? 'bg-slate-900 border-white/20'
        : 'bg-white border-slate-200'
    }`}>
      <div className={`p-3 border-b ${isDark ? 'border-white/10' : 'border-slate-100'}`}>
        <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Vorlagen
        </span>
      </div>
      <div className="max-h-64 overflow-y-auto">
        {templates.map(tpl => (
          <button
            key={tpl.id}
            onClick={() => onSelect(tpl.content)}
            className={`w-full text-left p-3 transition-colors ${
              isDark
                ? 'hover:bg-white/5 border-b border-white/5'
                : 'hover:bg-slate-50 border-b border-slate-100'
            }`}
          >
            <span className={`text-sm font-medium block ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {tpl.name}
            </span>
            <span className={`text-xs line-clamp-2 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
              {tpl.content}
            </span>
          </button>
        ))}
      </div>
    </div>
  )
}