"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export function MotionPresets() {
  const [playKey, setPlayKey] = useState(0);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-semibold">Presets de movimiento</p>
          <p className="text-sm text-muted-foreground">
            Animaciones reutilizables para secciones clave.
          </p>
        </div>
        <Button size="sm" variant="secondary" onClick={() => setPlayKey((prev) => prev + 1)}>
          Reproducir
        </Button>
      </div>

      <div key={playKey} className="grid gap-4 md:grid-cols-2">
        <div className="surface-panel p-4 motion-fade motion-reduce:animate-none">
          <p className="text-sm font-semibold">Fade in</p>
          <p className="text-xs text-muted-foreground">
            Ideal para textos y bloques ligeros.
          </p>
        </div>
        <div className="surface-panel p-4 motion-slide motion-reduce:animate-none">
          <p className="text-sm font-semibold">Slide up</p>
          <p className="text-xs text-muted-foreground">
            Entrada suave con desplazamiento corto.
          </p>
        </div>
        <div className="surface-panel p-4 motion-scale motion-reduce:animate-none">
          <p className="text-sm font-semibold">Scale</p>
          <p className="text-xs text-muted-foreground">
            Enfatiza bloques destacados.
          </p>
        </div>
        <div className="surface-panel p-4">
          <p className="text-sm font-semibold">Stagger</p>
          <div className="mt-3 space-y-2">
            {["Paso uno", "Paso dos", "Paso tres"].map((label, index) => (
              <div
                key={label}
                className={`rounded-lg border border-border/70 bg-background/70 px-3 py-2 text-xs text-muted-foreground motion-stagger stagger-${index + 1} motion-reduce:animate-none`}
              >
                {label}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}