import './App.css';
import Card from './components/Card/Card';
import Activator from './components/Activator/Activator';

const LightThemes = () => <Card name="Light Themes">
    <Activator title="Dark reds" activated={false} />
    <Activator title="Watery" activated={false} />
    <Activator title="Sunset" activated={false} />
    <Activator title="Darkness" activated={true} />
</Card>

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

interface LightProps {
    name: string,
}

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

const Tracks = () => <Card name="Tracks">
    <Track name="City BGM" />
    <Track name="Chat on the streets" />
    <Track name="Abandoned structure" />
    <Track name="Water dripping" />
</Card>

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

const Presets = () => <Card name="Presets">
    <Scene name="Gilcrest Falls day" />
    <Scene name="Gilcrest Falls night" />
    <Scene name="Empty colony" />
    <Scene name="Surk colony" />
</Card>

interface PresetProps {
    name: string
}

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

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

const Palette = () => <div className="palette">
    <div className="item-1" />
    <div className="item-2" />
    <div className="item-3" />
    <div className="item-4" />
    <div className="item-5" />
</div>

const Palette2 = () => <div className="palette">
    <div className="item-6" />
    <div className="item-7" />
    <div className="item-8" />
    <div className="item-9" />
    <div className="item-10" />
</div>

const Palette3 = () => <div className="palette">
    <div className="item-11" />
    <div className="item-12" />
    <div className="item-13" />
    <div className="item-14" />
    <div className="item-15" />
</div>

const App = () => {
    return (
        <div className="app">
            <Palette />
            <Palette2 />
            <Palette3 />
            <div className="layout">
                <Presets />
                <div>
                    <LightThemes />
                    <Tracks />
                </div>
            </div>
        </div>
    );
}

export default App;