"use client";
import { Filter, SortAsc, SortDescIcon } from "lucide-react";
import React from "react";
import { AiOutlineEye } from "react-icons/ai";

interface ComponentCardProps {
  title: string;
  children: React.ReactNode;
  className?: string; // Additional custom classes for styling
  desc?: string; // Description text
  size?: "sm" | "md" | "lg";
  onBack?: () => void;
}

const ComponentCard: React.FC<ComponentCardProps> = ({
  title,
  children,
  className = "",
  desc = "",
  size = "lg",
  onBack,
}) => {
  return (  
    <div
      className={`bg-[#fff] ${className}`}
    >
      <div className="px-6 py-5">
        <h3 className={`text-xl font-medium text-primary dark:text-white/90 ${size === "sm" ? "text-base" : size === "lg" ? "text-2xl" : "text-xl"}`} >
          {title}
        </h3>
        {desc && (
          <p className="mt-1 text-sm text-secondary dark:text-gray-400">
            {desc}
          </p>
        )}
      </div>

      <div className="px-4 py-1 sm:px-6 sm:py-1">
        <div className="space-y-6 ">{children}</div>
      </div>
    </div>
  );
};

export default ComponentCard;