"use client";

import React from "react";
import DownArrow from "@/modules/icons/DownArrow";

interface FilterSectionProps {
  title: string;
  badge?: number;
  children: React.ReactNode;

  isCollapsible?: boolean;
  isExpanded?: boolean;
  onToggle?: () => void;

  showBorder?: boolean;
}

export default function Page({
  title,
  badge,
  children,
  isCollapsible = false,
  isExpanded = true,
  onToggle,
  showBorder = true,
}: FilterSectionProps) {
  const Header = (
    <div
      className={`w-full flex items-center justify-between py-4 px-6 ${
        showBorder ? "border-b border-border mb-3" : ""
      } ${isCollapsible ? "hover:bg-muted/50 transition-colors" : ""}`}
      onClick={isCollapsible ? onToggle : undefined}
    >
      <div className="flex items-center gap-3">
        <span className="text-base font-medium text-foreground">{title}</span>
        {badge !== undefined && badge > 0 && (
          <span className="bg-primary text-white text-xs font-semibold rounded-full w-6 h-6 flex items-center justify-center">
            {badge}
          </span>
        )}
      </div>

      {isCollapsible && (
        <DownArrow
          size={20}
          className={`text-primary transition-transform duration-200 ${
            isExpanded ? "rotate-180" : ""
          }`}
        />
      )}
    </div>
  );

  return (
    <div className=" border-border last:border-0">
      {Header}
      {(!isCollapsible || isExpanded) && (
        <div className="px-6 pb-4 bg-background">{children}</div>
      )}
    </div>
  );
}