rowboat/apps/rowboat/app/projects/select/components/search-projects.tsx

import { Project } from "@/app/lib/types/project_types";
import { z } from "zod";
import { ProjectList } from "./project-list";
import { SectionHeading } from "@/components/ui/section-heading";
import { HorizontalDivider } from "@/components/ui/horizontal-divider";
import clsx from 'clsx';
import { XMarkIcon } from "@heroicons/react/24/outline";

interface SearchProjectsProps {
    projects: z.infer<typeof Project>[];
    isLoading: boolean;
    heading: string;
    subheading?: string;
    className?: string;
    onClose?: () => void;
}

export function SearchProjects({ 
    projects, 
    isLoading,
    heading,
    subheading,
    className,
    onClose
}: SearchProjectsProps) {
    return (
        <div className={clsx("card", className)}>
            <div className="px-4 pt-4 pb-6 flex-none">
                <div className="flex justify-between items-center">
                    <SectionHeading
                        subheading={subheading}
                    >
                        {heading}
                    </SectionHeading>
                    {onClose && (
                        <button
                            onClick={onClose}
                            className="text-gray-500 hover:text-gray-700"
                        >
                            <XMarkIcon className="w-5 h-5" />
                        </button>
                    )}
                </div>
            </div>
            <HorizontalDivider />
            <div className="flex-1 overflow-hidden">
                <ProjectList 
                    projects={projects}
                    isLoading={isLoading}
                    searchQuery=""
                />
            </div>
        </div>
    );
}