<commit_before>// ─────────────────────────────────────────────────────────────────────────────
// import
// ─────────────────────────────────────────────────────────────────────────────

import React, { useEffect } from 'react';

import { Input } from '~components';
import { useLocalStorage } from '~utils';

// ─────────────────────────────────────────────────────────────────────────────
// component
// ─────────────────────────────────────────────────────────────────────────────

export default function ColourThemeContainer() {
  const [theme, setTheme] = useLocalStorage('theme', 'basic');

  useEffect(() => {
    const seed = Math.floor(Math.random() * 360);

    const themes = {
      basic: {
        color:           '200, 5%, 45%',
        backgroundColor: '0, 100%, 100%',
      },
      crazy: {
        color:           `${seed}, 100%, 50%`,
        backgroundColor: `${seed - 180}, 100%, 50%`,
      },
      dark: {
        color:           '0, 0%, 60%',
        backgroundColor: '0, 0%, 5%',
      },
    };

    document.documentElement.style.setProperty('--hsl-text', themes[theme].color);
    document.documentElement.style.setProperty('--hsl-bg', themes[theme].backgroundColor);
  }, [theme]);

  return (
    <Input
      type="radio"
      name="theme"
      options={[
        {
          value:   'basic',
          label:   'default',
          checked: theme === 'basic',
        },
        {
          value:   'dark',
          label:   'dark',
          checked: theme === 'dark',
        },
        {
          value:   'crazy',
          label:   'crazy',
          checked: theme === 'crazy',
        },<commit_msg>update theme container copy<commit_after>// ─────────────────────────────────────────────────────────────────────────────
// import
// ─────────────────────────────────────────────────────────────────────────────

import React, { useEffect } from 'react';

import { Input } from '~components';
import { useLocalStorage } from '~utils';

// ─────────────────────────────────────────────────────────────────────────────
// component
// ─────────────────────────────────────────────────────────────────────────────

export default function ColourThemeContainer() {
  const [theme, setTheme] = useLocalStorage('theme', 'basic');

  useEffect(() => {
    const seed = Math.floor(Math.random() * 360);

    const themes = {
      basic: {
        color:           '200, 5%, 45%',
        backgroundColor: '0, 100%, 100%',
      },
      crazy: {
        color:           `${seed}, 100%, 50%`,
        backgroundColor: `${seed - 180}, 100%, 50%`,
      },
      dark: {
        color:           '0, 0%, 60%',
        backgroundColor: '0, 0%, 5%',
      },
    };

    document.documentElement.style.setProperty('--hsl-text', themes[theme].color);
    document.documentElement.style.setProperty('--hsl-bg', themes[theme].backgroundColor);
  }, [theme]);

  return (
    <Input
      type="radio"
      name="theme"
      options={[
        {
          value:   'basic',
          label:   'Default',
          checked: theme === 'basic',
        },
        {
          value:   'dark',
          label:   'Dark',
          checked: theme === 'dark',
        },
        {
          value:   'crazy',
          label:   'Crazy',
          checked: theme === 'crazy',
        },
{'fraction_non_alphanumeric': 0.32710843373493975, 'fraction_numerical': 0.021686746987951807, 'mean_word_length': 2.4237113402061854, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2218807', 'n_tokens_mistral': 1196, 'n_tokens_neox': 906, 'n_words': 193}