import './Dashboard.css';
import Card from './components/Card/Card';
import Launcher from './components/Launcher/Launcher';
import Launchpad from './components/Launchpad/Launchpad';

const LightThemes = () => <Card name="Light Themes">
    <Launchpad
        exclusive={true}
        options={[
            { title: "Dark reds" },
            { title: "Watery" },
            { title: "Sunset" },
            { title: "Darkness" },
        ]}
    />
</Card>

const LightSetup = () => <div> </div>

interface LightProps {
    name: string,
}

const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>

const Tracks = () => <Card name="Tracks">
    <Launchpad
        exclusive={false}
        options={[
            { title: "City BGM" },
            { title: "Chat on the streets" },
            { title: "Abandoned structure" },
            { title: "Water dripping" },
        ]}
    />
</Card>

interface TrackProps {
    name: string,
}
const Track = ({ name }: TrackProps) => <Launcher title={name} />

const Presets = () => <Card name="Presets">
    <Launchpad
        exclusive={true}
        options={[
            { title: "Gilcrest Falls day" },
            { title: "Gilcrest Falls night" },
            { title: "Empty colony" },
            { title: "Surk colony" },
        ]}
    />
</Card>

interface PresetProps {
    name: string
}

// const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />

const SceneEditor = () => <div> </div>

const Dashboard = () => {
    return (
        <div className="app">
            <div className="layout">
                <Presets />
                <div>
                    <LightThemes />
                    <Tracks />
                </div>
            </div>
        </div>
    );
}

export default Dashboard;