"use client";

import {useState} from "react";

export default function WorkspaceSettings(){

const [theme,setTheme]=useState("dark");
const [autosave,setAutosave]=useState(true);
const [ai,setAi]=useState(true);

return(

<div className="h-full bg-neutral-950 text-white p-6 overflow-auto">

<h2 className="text-2xl font-bold mb-6">
Workspace Settings
</h2>

<div className="space-y-6">

<div>

<label className="block mb-2 font-semibold">
Theme
</label>

<select
value={theme}
onChange={e=>setTheme(e.target.value)}
className="w-full rounded bg-neutral-900 border border-neutral-700 p-2"
>
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="system">System</option>
</select>

</div>

<div className="flex items-center justify-between border-b border-neutral-800 pb-4">

<span>Autosave</span>

<input
type="checkbox"
checked={autosave}
onChange={()=>setAutosave(!autosave)}
/>

</div>

<div className="flex items-center justify-between border-b border-neutral-800 pb-4">

<span>AI Assistant</span>

<input
type="checkbox"
checked={ai}
onChange={()=>setAi(!ai)}
/>

</div>

<button
className="mt-8 px-5 py-2 rounded bg-blue-600 hover:bg-blue-700"
>
Save Settings
</button>

</div>

</div>

);

}