mister-webdev / movie-app

import { useMatch } from 'react-location'

import { Helmet } from 'react-helmet'

import { YoutubeVideo } from 'entities/YoutubeVideo'

import { Text, LoadingTape, Separator } from 'shared/ui'

import { IMAGE_BACKDROP } from 'shared/config/images'

import { IMovieDetailsVideos, IGenres, IMovieCast } from 'types/common'

import type { LocationGenerics } from 'app/Routes'

import styles from './movie.module.scss'

  const {

    data: { movie },

    isLoading,

  } = useMatch<LocationGenerics>()

  const { results } = movie?.videos as IMovieDetailsVideos

  const HeroImage = `${import.meta.env.APP_IMAGE_URL}/${IMAGE_BACKDROP.L}${

    movie?.backdrop_path

  }`

  console.log(movie)

  const trailer = results?.filter(

    ({ type }: { type: string }) => type === 'Trailer',

  )[0]

  const renderedGenres = movie?.genres.map(

    ({ id, name }: IGenres, idx: number, self: IGenres[]) => {

      return (

        </span>

      )

    },

  )

        { rel: 'preconnect', href: 'https://i.ytimg.com' },

        { rel: 'preconnect', href: 'https://www.youtube.com' },

        { rel: 'preload', as: 'image', href: `${HeroImage}` },

      ]}

    />

  )

  return (

      ) : (

        >

            )}

            </div>

          </div>

        </div>

      )}

    </>

  )

}

export default Movie