import { H1, YStack, Button } from '@junwon/aesthetics'
import { useRouter, usePathname } from 'solito/navigation'

import { AboutPage } from './about'
import { ProductsPage } from './products'
import { CareersPage } from './careers'
import { PrivacyPage } from './privacy'
import { TermsPage } from './terms'
import { ContactPage } from './contact'

export function CompanySite() {
  const pathname = usePathname()

  const renderPage = () => {
    switch (pathname) {
      case '/about':
        return <AboutPage />
      case '/products':
        return <ProductsPage />
      case '/careers':
        return <CareersPage />
      case '/privacy':
        return <PrivacyPage />
      case '/terms':
        return <TermsPage />
      case '/contact':
        return <ContactPage />
      default:
        return <DirectoryPage />
    }
  }

  return renderPage()
}

function DirectoryPage() {
  const router = useRouter()

  return (
    <YStack
      w="100%"
      h="100%"
      f={1}
      jc="space-between"
      p="$10"
    >
      <H1>Junwon</H1>
      <Button onPress={() => router.push('/about')}>About Junwon</Button>
      <Button onPress={() => router.push('/products')}>Products</Button>
      <Button onPress={() => router.push('/careers')}>Join Us</Button>
      <Button onPress={() => router.push('/privacy')}>Privacy Policy</Button>
      <Button onPress={() => router.push('/terms')}>Terms of Service</Button>
      <Button onPress={() => router.push('/contact')}>Contact Us</Button>
    </YStack>
  )
}