'use client'
import Shortcut from '@/components/shortcut'
import { Input } from '@/components/ui/input'
import { Flame, Radius, Search } from 'lucide-react'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Item } from '@/lib/types'
import store from 'store2'

export default function Home() {
  const router = useRouter()
  const [shortcuts, setShortcuts] = useState<Item[]>([])
  const [splashText, setSplashText] = useState<string>('')

  useEffect(() => {

    fetch('/splash.json')
      .then(response => response.json())
      .then(data => {
        const randomIndex = Math.floor(Math.random() * data.length);
        setSplashText(data[randomIndex].splash);
      })
      .catch(error => console.error('Error fetching splash text:', error));

    store.set('shortcuts', [], false)
    const data: Item[] = store('shortcuts')
    setShortcuts(data)
  }, [])

  return (
    <div>
      <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-6">
        <div className="flex items-center gap-2">
          <Radius className="h-16 w-16 rotate-180" />
          <h1 className="text-6xl font-semibold">Radius</h1>
        </div>
        <div className="flex items-center gap-2">
          <div className="relative">
            <Input
              className="w-[26rem] px-9 h-12 rounded-lg"
              placeholder="Search the web"
              onKeyDown={(e) => {
                if (e.key !== 'Enter') return
                router.push(`/go/${btoa(e.currentTarget.value)}`)
              }}
            />
            <Search className="h-4 w-4 text-muted-foreground absolute top-1/2 -translate-y-1/2 left-3" />
          </div>
        </div>
        <p style={{ fontSize: '1rem', fontWeight: 'normal', marginTop: '0rem' }}>{splashText}</p>
        {shortcuts.length > 0 && (
          <div className="py-2 flex flex-wrap gap-2 justify-center">
            {shortcuts.map((shortcut: Item) => {
              return <Shortcut key={shortcut.title} image={shortcut.image} title={shortcut.title} url={shortcut.url} />
            })}
          </div>
        )}
      </div>
    </div>
  )
}