3D flip

import { useState } from 'react';

// Both faces share one grid cell and hide their back side.
const FACE =
  'col-start-1 row-start-1 flex min-h-44 flex-col items-center justify-center gap-2 rounded-2xl border p-6 backface-hidden transition-opacity duration-300';

export function Flashcard() {
  const [flipped, setFlipped] = useState(false);

  return (
    <button
      type='button'
      onClick={() => setFlipped(!flipped)}
      className='w-72 rounded-2xl perspective-[1000px]'
    >
      {/* With reduced motion the card stays put and the faces crossfade. */}
      <span
        className={`grid transform-3d transition-transform duration-600 ease-in-out ${flipped ? 'motion-safe:rotate-y-180' : ''}`}
      >
        {/* inert keeps the hidden face out of the button's accessible name. */}
        <span
          inert={flipped}
          className={`${FACE} bg-background ${flipped ? 'motion-reduce:opacity-0' : ''}`}
        >
          <span className='text-2xl font-semibold'>¿Cómo estás?</span>
          <span className='text-sm text-muted-foreground'>Show answer</span>
        </span>
        <span
          inert={!flipped}
          className={`${FACE} bg-muted motion-safe:rotate-y-180 ${flipped ? '' : 'motion-reduce:opacity-0'}`}
        >
          <span className='text-2xl font-semibold'>How are you?</span>
          <span className='text-sm text-muted-foreground'>Show question</span>
        </span>
      </span>
    </button>
  );
}