import React, { FC } from 'react'

import { Home } from './Home'
import { Counter } from './Counter'
import { FetchData } from './FetchData'

import { AdminHome } from './AdminHome'

import { Signin } from './Signin'
import { Signup } from './Signup'
import { ShopCatalog, ShopItem, Cart, Checkout } from './Shop'
import { BlogCatalog, BlogItem } from './Blog'



interface IPages {
  [key: string]: FC<any>;
}

const pages: IPages = {
  Home,

  ShopCatalog,
  ShopItem,
  Cart,
  Checkout,

  BlogCatalog,
  BlogItem,
  
  Counter,
  FetchData,

  AdminHome,
  
  Signin,
  Signup
}

export interface IDynamicPage {
  tag: string
}

const DynamicPage: FC<IDynamicPage> = (props) => {
  const { tag } = props

  const TagName = pages[tag]
  return <TagName />
}

export {
  DynamicPage
}
