import { useState } from 'react';
import { Switch } from '../../components/Switch';
import { SchemeSet } from '../../stores/schemes';
import { SchemeContent } from './SchemeContent';
import styles from './SchemeView.module.css';

type SchemeViewProps = {
  scheme: SchemeSet['lightScheme' | 'darkScheme'];
};

export function SchemeView({ scheme }: SchemeViewProps) {
  const [enablePreview, setEnablePreview] = useState(false);

  return (
    <div className={styles.scheme_view_layout}>
      <div className={styles.preview_switch_container}>
        <span>Preview scheme</span>
        <Switch onChange={(checked) => setEnablePreview(checked)} />
      </div>
      {enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
    </div>
  );
}