interface TagFilterProps {
  allTags: string[]
  selectedTags: string[]
  onToggleTag: (tag: string) => void
  onClearTags: () => void
}

export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: TagFilterProps) {
  if (allTags.length === 0) return null

  return (
    <div className="border border-slate-700 bg-slate-900 p-6 mb-12">
      <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
        FILTER BY TAG
      </p>
      <div className="flex flex-wrap gap-3">
        {allTags.map(tag => (
          <button
            key={tag}
            onClick={() => onToggleTag(tag)}
            className={`px-4 py-2 font-mono text-xs uppercase border transition-colors cursor-pointer ${
              selectedTags.includes(tag)
                ? 'bg-cyan-400 border-cyan-400 text-slate-900'
                : 'bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
            }`}
          >
            #{tag}
          </button>
        ))}
      </div>
      {selectedTags.length > 0 && (
        <button
          onClick={onClearTags}
          className="mt-4 font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer"
        >
          &gt; CLEAR FILTERS
        </button>
      )}
    </div>
  )
}
