import React from 'react'
import BrowserOnly from '@docusaurus/BrowserOnly'
import { translate } from '@docusaurus/Translate'
import { useColorMode } from '@docusaurus/theme-common'

export function CreateProjectAnimation() {
    return (
        <BrowserOnly>
            {() => {
                const { colorMode } = useColorMode()
                const src = colorMode === 'dark'
                    ? '/img/create-wdio-dark.gif'
                    : '/img/create-wdio-light.gif'
                return (
                    <img
                        src={src}
                        style={{ margin: '0 auto', display: 'block' }}
                        alt={translate({
                            id: 'homepage.createBrowserAnimation',
                            message: 'Create WebdriverIO Demo'
                        })}
                    />
                )
            }}
        </BrowserOnly>
    )
}

export function CreateMacOSProjectAnimation() {
    return (
        <BrowserOnly>
            {() => {
                const { colorMode } = useColorMode()
                const src = colorMode === 'dark'
                    ? '/img/create-wdio-macos-dark.gif'
                    : '/img/create-wdio-macos-light.gif'
                return (
                    <img
                        src={src}
                        style={{ margin: '0 auto', display: 'block' }}
                        alt={translate({
                            id: 'homepage.createBrowserAnimation',
                            message: 'Create WebdriverIO Project to automate MacOS apps'
                        })}
                    />
                )
            }}
        </BrowserOnly>
    )
}

/**
 * this should be removed once we move the `components` directory out of `pages`
 */
export default () => {
    return <></>
}