import {Link, Stack} from 'expo-router'
import type {FunctionComponent} from 'react'
import {Ionicons} from '@expo/vector-icons'

const StackLayout: FunctionComponent = () => {
  return (
    <Stack>
      <Stack.Screen
        name="(tabs)"
        options={{
          headerShadowVisible: false,
          title: 'Tasks',
          headerRight: ({tintColor}) => (
            <Link href="/tasks/create">
              <Ionicons name="add" color={tintColor} size={30} />
            </Link>
          ),
        }}
      />
      <Stack.Screen
        name="create"
        options={{
          // Open het scherm als een modaal venster.
          presentation: 'modal',
          title: 'Create task',
        }}
      />
      <Stack.Screen
        // Parameters moeten ook meegenomen worden in de naam van een scherm.
        name="[taskId]"
        options={{
          // Open het scherm als een modaal venster.
          presentation: 'modal',
          title: 'Edit task',
        }}
      />
    </Stack>
  )
}

export default StackLayout
