import { useEffect, useState } from 'react';
import './App.css'
import Canvas from './components/Canvas'
import WebFont from 'webfontloader';
import Header from './components/Layouts/Header';
import SheetRightPanel from './components/Layouts/SheetRightPanel';
import SheetLeftPanel from './components/Layouts/SheetLeftPanel';
import CanvasCapture from "./components/CanvasCapture";
import { Toaster } from './components/ui/toaster';

function App() {
  useEffect(() => {
    WebFont.load({
      google: {
        families: [
          'Roboto:300,400,500,700',
          'Open Sans:300,400,600,700',
          'Lato:300,400,700',
          'Montserrat:300,400,500,700',
          'Raleway:300,400,500,700',
          'Poppins:300,400,500,700',
          'Merriweather:300,400,700',
          'Playfair Display:400,500,700',
          'Nunito:300,400,600,700',
          'Oswald:300,400,500,600',
          'Source Sans Pro:300,400,600,700',
          'Ubuntu:300,400,500,700',
          'Noto Sans:300,400,500,700',
          'Work Sans:300,400,500,700',
          'Bebas Neue',
          'Arimo:300,400,500,700',
          'PT Sans:300,400,700',
          'PT Serif:300,400,700',
          'Titillium Web:300,400,600,700',
          'Fira Sans:300,400,500,700',
          'Karla:300,400,600,700',
          'Josefin Sans:300,400,500,700',
          'Cairo:300,400,600,700',
          'Rubik:300,400,500,700',
          'Mulish:300,400,500,700',
          'IBM Plex Sans:300,400,500,700',
          'Quicksand:300,400,500,700',
          'Cabin:300,400,500,700',
          'Heebo:300,400,500,700',
          'Exo 2:300,400,500,700',
          'Manrope:300,400,500,700',
          'Jost:300,400,500,700',
          'Anton',
          'Asap:300,400,600,700',
          'Baloo 2:300,400,500,700',
          'Barlow:300,400,500,700',
          'Cantarell:300,400,700',
          'Chivo:300,400,500,700',
          'Inter:300,400,500,700',
          'Dosis:300,400,500,700',
          'Crimson Text:300,400,600,700',
          'Amatic SC:300,400,700',
          'ABeeZee',
          'Raleway Dots',
          'Pacifico',
          'Orbitron:300,400,500,700',
          'Varela Round',
          'Acme',
          'Teko:300,400,500,700',
        ],
      },
    });
  }, []);

  return (
    <div className="relative flex flex-col h-screen overflow-hidden">
      <Toaster />
      <SheetLeftPanel />
      <Header />
      <SheetRightPanel />

      <main className="flex-1 overflow-hidden mt-[60px]">
        <div className="h-full overflow-auto">
          <Canvas />
          <CanvasCapture />
        </div>
      </main>
    </div>
  )
}

export default App