import React from "react";
import "./ContentFilters.css";

const FILTERS = [
  { key: "links", icon: "fa-solid fa-link", label: "Links" },
  { key: "video", icon: "fa-solid fa-circle-play", label: "Video" },
  { key: "image", icon: "fa-solid fa-camera", label: "Photos" },
  { key: "text", icon: "fa-solid fa-pen-to-square", label: "Blogs" },
  { key: "live", icon: "fa-solid fa-tower-broadcast", label: "Live" },
  { key: "event", icon: "fa-regular fa-calendar-days", label: "Events" },
];

export default function ContentFilters({ activeFilter, onFilterChange }) {
  return (
    <div className="content-filters">
      {FILTERS.map((f) => (
        <button
          key={f.key}
          type="button"
          className={`content-filter-btn filter-${f.key}${activeFilter === f.key ? " active" : ""}`}
          onClick={() => onFilterChange(activeFilter === f.key ? "all" : f.key)}
        >
          <i className={f.icon} />
          <span className="filter-label">{f.label}</span>
        </button>
      ))}
    </div>
  );
}

// Export filter matching function for reuse
export function matchesContentFilter(post, filter) {
  if (!filter || filter === "all") return true;
  const ct = (post.content_type || post.contentType || "").toLowerCase();
  const cat = (post.category || "").toLowerCase();
  const hasVideo = !!(post.video_url || post.videoUrl || post.embed_url || post.embedUrl);
  const hasImage = !!(post.image_small || post.image_medium || post.image_large || (post.media_urls && post.media_urls.length > 0));

  switch (filter) {
    case "links":
      return cat === "news" || ct === "news";
    case "video":
      // Recorded videos only
      return ct === "video";
    case "image":
      return hasImage && !hasVideo && ct !== "camera" && ct !== "video";
    case "text":
      return ct === "post" || ct === "text" || ct === "blog" || cat === "friends";
    case "live":
      // Only live content: cameras (quebec511), live streams - NOT recorded videos
      return ct === "live" || ct === "stream" || ct === "camera";
    case "event":
      return cat === "event" || cat === "events" || ct === "event";
    default:
      return true;
  }
}
