import Listing from '@/blocks/products-list'
import Titlebar from '@/components/layout/dashboard/titlebar'
import { Pencil } from 'lucide-react'
import React from 'react'
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
const Page = () => {
    return (
        <div>
            <Titlebar title="Collection" />
            <div className='flex items-center gap-3'>
                <div className=''>
                    <h2>Collection: Luxury </h2>
                    <h2>Title: New Models</h2>
                </div>
                {/* <Pencil className='size-8 rounded-lg text-white bg-gray-600 p-2 cursor-pointer' /> */}
                <div className=''>
                    <Dialog>
                        <DialogTrigger asChild>
                            <Pencil className='size-8 rounded-lg text-white bg-gray-600 p-2 cursor-pointer' />
                        </DialogTrigger>
                        <DialogContent className="bg-white text-black p-5 ">
                            <h1 className=' text-black font-bold text-2xl text-center'>Edit Collection</h1>
                            <div className=' flex flex-col gap-5'>
                                <div>
                                    <Label>Collection</Label>
                                    <select className='w-full outline-none px-3 py-2 shadow rounded-lg' name="" id="">
                                        <option value="">Luxury</option>
                                    </select>
                                </div>
                                <div>
                                    <Label>Title</Label>
                                    <Input className=' ring-0 border-none' />
                                </div>
                            </div>
                            <div className=' flex flex-row gap-3 items-center justify-center'>
                                <Dialog>
                                    <DialogTrigger asChild>
                                        <Button className=' w-32'>Delete</Button>
                                    </DialogTrigger>
                                    <DialogContent className="bg-white text-black w-auto">
                                        <h1 className=' text-black font-bold text-xl text-center mb-5'>Are You Sure?</h1>
                                        <div className=' flex flex-row gap-3 items-center justify-between'>
                                            <button className=' w-32 border border-gray-300 h-10 rounded-lg bg-gray-300 text-gray-500 font-bold'>Cancel</button>
                                            <Button className=' w-32 text-sm'>Delete Collection</Button>

                                        </div>
                                    </DialogContent>
                                </Dialog>
                                <button className=' border h-10 rounded-lg bg-transparent px-2 border-primary text-sm text-primary'>Update Collection</button>
                            </div>
                        </DialogContent>
                    </Dialog>
                </div>
            </div>
            <Listing />
        </div>
    )
}

export default Page