import { render } from 'preact';
import { useState } from 'preact/hooks';
import preactLogo from './assets/preact.svg';
import './style.css';

export function App() {
    const [value, setValue] = useState(0);

    return (
        <div>
            <a href="https://preactjs.com">
                <img
                    src={preactLogo}
                    alt="Preact logo"
                    height="160"
                    width="160"
                />
            </a>
            <h1>Get Started building Vite-powered Preact Apps </h1>
            <section>
                <div>Counter: {value}</div>
                <button onClick={() => setValue(value + 1)}>Increment</button>
                <button onClick={() => setValue(value - 1)}>Decrement</button>
            </section>
            <section>
                <Resource
                    title="Learn Preact"
                    description="If you're new to Preact, try the interactive tutorial to learn important concepts"
                    href="https://preactjs.com/tutorial"
                />
                <Resource
                    title="Differences to React"
                    description="If you're coming from React, you may want to check out our docs to see where Preact differs"
                    href="https://preactjs.com/guide/v10/differences-to-react"
                />
                <Resource
                    title="Learn Vite"
                    description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
                    href="https://vitejs.dev"
                />
            </section>
        </div>
    );
}

function Resource(props: Record<'href' | 'title' | 'description', string>) {
    return (
        <a href={props.href} class="resource">
            <h2>{props.title}</h2>
            <p>{props.description}</p>
        </a>
    );
}

const app = document.getElementById('app');
if (app) {
    render(<App />, app);
} else {
    console.error('Cannot find app container');
}