kit-ui/components/animate/PresetLibrary.tsx

'use client';

import { useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { PRESETS, PRESET_CATEGORIES } from '@/lib/animate/presets';
import { buildKeyframesOnly } from '@/lib/animate/cssBuilder';
import type { AnimationConfig, AnimationPreset } from '@/types/animate';

interface Props {
  onSelect: (config: AnimationConfig) => void;
}

function PresetCard({ preset, onSelect }: {
  preset: AnimationPreset;
  onSelect: () => void;
}) {
  const styleRef = useRef<HTMLStyleElement | null>(null);
  const animName = `preview-${preset.id}`;

  // Inject only the @keyframes block under a unique name — no .animated class rule
  useEffect(() => {
    const renamedConfig = { ...preset.config, name: animName };
    if (!styleRef.current) {
      styleRef.current = document.createElement('style');
      document.head.appendChild(styleRef.current);
    }
    styleRef.current.textContent = buildKeyframesOnly(renamedConfig);
    return () => {
      styleRef.current?.remove();
      styleRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Cap thumbnail duration so fast presets loop nicely; slow ones cap at 1.2s
  const thumbDuration = Math.min(preset.config.duration, 1200);

  return (
    <button
      onClick={onSelect}
      className="flex flex-col items-center gap-2 p-3 rounded-xl border border-border bg-card/50 transition-all duration-200 hover:border-primary/50 hover:bg-accent/30 hover:shadow-sm"
    >
      {/* Mini preview — animation driven entirely by inline style, not .animated class */}
      <div className="w-full h-14 flex items-center justify-center rounded-lg bg-muted/30 overflow-hidden">
        <div
          className="w-8 h-8 rounded-md bg-gradient-to-br from-violet-500 to-purple-600"
          style={{
            animationName: animName,
            animationDuration: `${thumbDuration}ms`,
            animationTimingFunction: preset.config.easing,
            animationIterationCount: 'infinite',
            animationDirection: 'alternate',
            animationFillMode: 'both',
          }}
        />
      </div>
      <span className="text-[11px] font-medium text-center leading-tight text-foreground/80">
        {preset.name}
      </span>
    </button>
  );
}

export function PresetLibrary({ onSelect }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Presets</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="Entrance">
          <TabsList className="mb-4">
            {PRESET_CATEGORIES.map((cat) => (
              <TabsTrigger key={cat} value={cat} className="text-xs">
                {cat}
              </TabsTrigger>
            ))}
          </TabsList>
          {PRESET_CATEGORIES.map((cat) => (
            <TabsContent key={cat} value={cat}>
              <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2">
                {PRESETS.filter((p) => p.category === cat).map((preset) => (
                  <PresetCard
                    key={preset.id}
                    preset={preset}
                    onSelect={() => onSelect(preset.config)}
                  />
                ))}
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </CardContent>
    </Card>
  );
}