import React from "react"
import { Link } from "react-router-dom"
import { useListBucktesQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum"
import MoreMenu from "./MoreMenu"
import { ReactComponent as Spinner } from "./../assets/spinner.svg"

const BucketSelect: React.FC = () => {

	const {data: buckets, loading} = useListBucktesQuery()

	return (
		<div>
			<div className="flex justify-between h-12">
				<Breadcrum />
				<div className="ml-auto">
					<MoreMenu />
				</div>
			</div>
			<ul>
				{buckets?.buckets.map((e)=>
					<li key={e}>
						<Link to={`/f/${e}/`} >{e}</Link>
					</li>
				)}
			</ul>
			{loading && 
				<div className="flex justify-center mt-4">
					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
				</div>
			}
		</div>
	)
}

export default BucketSelect