CedarCopilot/cedar-mail

import type { SplitTemplate } from '@/modules/threads/components/SplitInboxTabs';
import { SplitTemplateCard } from '@/modules/threads/components/SplitTemplateCard';
import { cn } from '@/lib/utils';

interface SplitTemplateGalleryProps {
  templates: SplitTemplate[];
  isApplied: (template: SplitTemplate) => boolean;
  onToggle: (template: SplitTemplate) => void;
  className?: string;
}

/**
 * The sub-inbox picker: click to add, click again to remove. Each click is its own
 * write — there is no Save at the end of the step, because the preview beside it is
 * already showing the result.
 */
export function SplitTemplateGallery({
  templates,
  isApplied,
  onToggle,
  className,
}: SplitTemplateGalleryProps) {
  const byCategory = templates.reduce<Map<string, SplitTemplate[]>>((acc, template) => {
    const list = acc.get(template.category) ?? [];
    list.push(template);
    acc.set(template.category, list);
    return acc;
  }, new Map());

  return (
    <div className={cn('flex flex-col gap-4', className)}>
      {[...byCategory.entries()].map(([category, group]) => (
        <section key=[redacted] className="space-y-2">
          <p className="text-foreground text-base font-semibold">{category}</p>
          <div className="grid grid-cols-2 gap-3">
            {group.map((template) => (
              <SplitTemplateCard
                key=[redacted]
                name={template.name}
                isApplied={isApplied(template)}
                accentClassName={template.accentClassName}
                onClick={() => onToggle(template)}
              />
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}