Flip

'use client';

import { useRef, useState } from 'react';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { Flip } from 'gsap/Flip';

gsap.registerPlugin(Flip);

export function LayoutGrid() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [layout, setLayout] = useState<'grid' | 'row'>('grid');

  const { contextSafe } = useGSAP({ scope: containerRef });

  const toggleLayout = contextSafe(() => {
    const items = gsap.utils.toArray<HTMLElement>('.flip-item');
    const state = Flip.getState(items);

    setLayout((l) => (l === 'grid' ? 'row' : 'grid'));

    requestAnimationFrame(() => {
      Flip.from(state, {
        duration: 0.6,
        ease: 'power2.inOut',
        stagger: 0.05,
        absolute: true,
      });
    });
  });

  return (
    <div ref={containerRef}>
      <button onClick={toggleLayout}>Toggle Layout</button>
      <div className={layout === 'grid' ? 'grid grid-cols-3' : 'flex flex-col'}>
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="flip-item p-4 bg-surface rounded-lg">
            Item {i}
          </div>
        ))}
      </div>
    </div>
  );
}