"use client"

import React from "react"

import { Button } from "ui/button"
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "ui/dialog"
import { ListPlus } from "ui/icon"
import { Tooltip, TooltipContent, TooltipTrigger } from "ui/tooltip"

import { AddCommunityForm } from "./AddCommunityForm"

export const AddCommunity = () => {
	const [open, setOpen] = React.useState(false)
	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<Tooltip>
				<TooltipContent> Create a new community</TooltipContent>
				<TooltipTrigger asChild>
					<DialogTrigger asChild>
						<Button variant="outline" className="flex items-center gap-x-2">
							<ListPlus size="16" /> Create Community
						</Button>
					</DialogTrigger>
				</TooltipTrigger>
			</Tooltip>

			<DialogContent>
				<DialogTitle>Create Community</DialogTitle>
				<AddCommunityForm setOpen={setOpen} />
			</DialogContent>
		</Dialog>
	)
}
