import { Heading, Text, VStack } from '@chakra-ui/react'
import { useParams } from '@redwoodjs/router'
import React from 'react'
import { patterns } from '../data'
import { Implementations } from 'src/pages/implementations'
import { Animations } from 'src/pages/animations'

export const PatternDetails: React.FC = () => {
  const { id } = useParams()
  const pattern = patterns.find((p) => p.id === id)

  if (!pattern) {
    return null
  }
  return (
    <VStack w="full" px="4" aria-label="hey" alignItems="flex-start">
      <Heading as="h2">{pattern.title}</Heading>
      <Text>{pattern.description}</Text>
      <VStack w="full" justifyContent="center" spacing="8">
        <VStack alignItems="flex-start">
          <Text pl="8" fontWeight="bold">
            Implementaciones
          </Text>
          <Implementations patternId={pattern.id} />
        </VStack>
        <VStack alignItems="flex-start">
          <Text pl="8" fontWeight="bold">
            Animaciones
          </Text>
          <Animations patternId={pattern.id} />
        </VStack>
      </VStack>
    </VStack>
  )
}