import React from 'react'
import { ModalHeader, ModalBody, Link, Text } from '@chakra-ui/react'
import ReactMarkdown from 'react-markdown'

import data from '../data/obras.json'

const basePath = 'https://taller5.ludic.cc/artimanias/2020'

const ObraModalContent: React.FC<{ id: number }> = ({ id }) => {
  const obra: IObraData = data.find((o) => o.id === id)

  if (!obra) return null

  return (
    <>
      <ModalHeader>{obra.obra_titulo}</ModalHeader>
      <ModalBody mb="2rem" mx="2rem" textAlign="center">
        <Text pb="2rem">
          por{' '}
          <Link href={`${basePath}${obra.alumne_url}`} isExternal>
            {obra.full_name}
          </Link>
        </Text>
        <Text as={ReactMarkdown} sx={{ p: { pb: '2rem' } }}>
          {obra.obra_descripcion}
        </Text>
        <Link href={`${basePath}${obra.obra_url}`} isExternal>
          Ver obra en sitio de Artimañas 2020
        </Link>
      </ModalBody>
    </>
  )
}

export default ObraModalContent
