import Link from 'next/link'
import React from 'react'

export default function Search() {
    return (
        <div className='w-screen h-screen'
            style={{ 'background': 'conic-gradient(from 210deg, #c6bcb9 0.000deg, #c6bcb9 24.000deg, #b9b6b9 calc(24.000deg + 0.1deg), #b9b6b9 48.000deg, #aab0b8 calc(48.000deg + 0.1deg), #aab0b8 72.000deg, #9ba9b6 calc(72.000deg + 0.1deg), #9ba9b6 96.000deg, #8ca2b4 calc(96.000deg + 0.1deg), #8ca2b4 120.000deg, #7e99b0 calc(120.000deg + 0.1deg), #7e99b0 144.000deg, #7191ac calc(144.000deg + 0.1deg), #7191ac 168.000deg, #6688a7 calc(168.000deg + 0.1deg), #6688a7 192.000deg, #5d7fa2 calc(192.000deg + 0.1deg), #5d7fa2 216.000deg, #56769c calc(216.000deg + 0.1deg), #56769c 240.000deg, #526d95 calc(240.000deg + 0.1deg), #526d95 264.000deg, #50648e calc(264.000deg + 0.1deg), #50648e 288.000deg, #515b86 calc(288.000deg + 0.1deg), #515b86 312.000deg, #55547e calc(312.000deg + 0.1deg), #55547e 336.000deg, #5c4c75 calc(336.000deg + 0.1deg) 360.000deg)' }}

        >
            <div className='bg-purple-900 flex p-2'>
                <input placeholder='Find' className='text-2xl grow bg-white' />

            </div>
            <div className='grid grid-cols-3'>
                <RoomCard title={'Dating'} room={"123"} />
                <RoomCard title={'Business'} room={"123"} />
                <RoomCard title={'Programming'} room={"123"} />
                <RoomCard title={'Somthing Else'} room={"123"} />
            </div>
        </div>
    )
}


function RoomCard({
    title,
    room,
}: {
    title: string
    room: string
}) {
    return <Link href={`/testb?room=${room}`}><div>{title}</div></Link>
}