import './PageTitle.sass'
import { Switch, Match } from 'solid-js'
import { RiSystemLockPasswordLine } from 'solid-icons/ri'
import { FiHash } from 'solid-icons/fi'
import { Si1password } from 'solid-icons/si'
import { TbColorSwatch } from 'solid-icons/tb'
import { BiRegularGitCompare } from 'solid-icons/bi'

export default (props: { title: string; description: string }) => {
  return (
    <section class="title">
      <Switch>
        <Match when={props.title === 'Password Generator'}>
          <RiSystemLockPasswordLine class="title__icon" opacity={1} />
        </Match>

        <Match when={props.title === 'Hash Generator'}>
          <FiHash class="title__icon" opacity={1} />
        </Match>

        <Match when={props.title === 'Password Manager'}>
          <Si1password class="title__icon" opacity={1} />
        </Match>

        <Match when={props.title === 'Color Converter'}>
          <TbColorSwatch class="title__icon" opacity={1} />
        </Match>

        <Match when={props.title === 'Text Comparison'}>
          <BiRegularGitCompare class="title__icon" opacity={1} />
        </Match>
      </Switch>

      <h1 class="title__text">{props.title}</h1>
      <p class="title__description">{props.description}</p>
    </section>
  )
}