import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Header } from './components/Header.jsx';
import { Button } from './components/Button.jsx';
import { PageTransition } from './components/PageTransition.jsx';
import { loadCars } from './carStorage.js';

export default function LandingPage() {
  const navigate = useNavigate();
  const [count, setCount] = useState(0);

  useEffect(() => {
    loadCars().then((opts) => setCount(opts.length));
  }, []);
  return (
    <PageTransition>
      <Header count={count} />
      <div className="start-container">
        <div className="card start-card">
          <Button onClick={() => navigate('/generate')} variant="primary">
            Kentekens genereren
          </Button>
          <Button onClick={() => navigate('/manage')} variant="ghost">
            Kinderauto beheren
          </Button>
        </div>
      </div>
    </PageTransition>
  );
}