import { useParams } from "react-router"
import SearchResults from "../../components/SearchResults"
import DefaultIconButton from "../../md-components/DefaultIconButton"
import Icon from "../../md-components/Icon"
import { Link } from "react-router-dom"
import { useEffect, useState } from "react"
import axios from "axios"

const CollectionPage = () => {
    const [ collectionInfo, setCollectionInfo ] = useState(false)
    const { id } = useParams()
    useEffect(() => {
        axios.get("/collection/"+id).then(res=>setCollectionInfo(res.data))
    }, [])
    return <>
        <div style={{display: "flex", alignItems: "center", gap: 15}}>
            <Link to={"/collections"}>
                <DefaultIconButton>
                    <Icon>chevron_left</Icon>
                </DefaultIconButton>
            </Link>
            <h3 style={{margin: 0}}>{collectionInfo.name}</h3>
        </div>
        <SearchResults
            collection={id}
        />
    </>
}

export default CollectionPage