import Layout from '@/components/Layout';
import DominoRetilingPuzzle from '@/components/DominoRetilingPuzzle';
import { useLocation, Link } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';

const DominoRetilingPuzzlePage = () => {
  const location = useLocation();
  const fromPuzzles = location.search.includes('from=puzzles');
  
  return (
    <Layout>
      {fromPuzzles && (
        <div className="max-w-4xl mx-auto px-6 pt-4">
          <Link 
            to="/themes/puzzles" 
            className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="w-4 h-4 mr-1" />
            Back to Puzzles
          </Link>
        </div>
      )}
      <DominoRetilingPuzzle />
    </Layout>
  );
};

export default DominoRetilingPuzzlePage;