'use client'

import { useState } from 'react'

export default function QuoteUI() {

const [form, setForm] = useState({

date: '',

type: 'Wedding',

venue: ''

})

const [quotes, setQuotes] = useState(null)

const generateQuote = () => {

// placeholder (we'll connect logic later)

setQuotes([

{ name: 'Basic', price: 699 },

{ name: 'Premium', price: 899 },

{ name: 'Deluxe', price: 1199 }

])

}

return (

<div style={{ display: 'flex', padding: 40, gap: 40 }}>

‍ ‍

{/* LEFT SIDE */}

<div style={{ width: '40%' }}>

<h2>Create Quote</h2>

<input

type="date"

onChange={e => setForm({ ...form, date: e.target.value })}

/>

<select

onChange={e => setForm({ ...form, type: e.target.value })}

>

<option>Wedding</option>

<option>Birthday</option>

<option>Corporate</option>

</select>

<input

placeholder="Venue or Address"

onChange={e => setForm({ ...form, venue: e.target.value })}

/>

<button onClick={generateQuote}>

Generate Quote

</button>

</div>

{/* RIGHT SIDE */}

<div style={{ width: '60%' }}>

<h2>Quote Preview</h2>

{quotes && quotes.map((q, i) => (

<div key={i} style={{ border: '1px solid #ccc', padding: 20, marginBottom: 10 }}>

<h3>{q.name}</h3>

<p>${q.price}</p>

</div>

))}

</div>

</div>

)

}