CreateWine is sort of working. It's not pushing producer id though

drizzle.config.ts

@@ -1,7 +1,6 @@
 import { type Config } from "drizzle-kit";
 import "./src/server/db/envConfig"
 
-
 export default {
   schema: "./src/server/db/schema.ts",
   dialect: "postgresql",

src/app/CreateWine.tsx

@@ -1,24 +1,59 @@
-"use client";
 
-import { FormEvent } from "react";
-import { allProducers, insertWine } from "~/server/db";
+'use client'
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import { addWine } from "../server/actions/addWine";
+import { getProducers } from "../server/actions/allProducers";
+
+interface Producer {
+  id: string;
+  name: string;
+  createdAt: Date;
+  country: string;
+  region: string;
+  email: string;
+}
+
+
 
 export default function CreateWine(){
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+  const [name, setName] = useState('');
+  const [producer, setProducer] = useState('');
+  const [allProducers, setAllProducers] = useState<Producer[]>([]);
 
-    const formData = new FormData(event.currentTarget);
-    const response = insertWine(formData);
+  useEffect(() => {
+    const fetchProducers = async () => {
+      try {
+        const producers = await getProducers();
+        setAllProducers(producers);
+      } catch (error) {
+        console.error("Failed to fetch producers:", error);
       }
+    };
+    fetchProducers();
+  }, []);
+
+  const handleName = (event: ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  }
+  const handleProducer = (event: ChangeEvent<HTMLSelectElement>) => {
+    setProducer(event.target.value);
+  }
+  const handleAdd = async (event: FormEvent) => {
+    event.preventDefault();
+    addWine(producer, name);
+    setName('');
+  };
   return (
-    <form onSubmit={handleSubmit}>
-      <select name="producer" id="producer">
-        {allProducers.map((producer) => (
-          <option key={producer.id} value={producer.id}>
-            {producer.name}
+    <div>
+      <input type="text" onChange={handleName} value={name} />
+      <select name="producer" onSelect={handleProducer}>
+        {allProducers.map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.name}
           </option>
         ))}
       </select>
-    </form>
+      <button onClick={handleAdd} >Submit wine</button>
+    </div>
   );
 }

src/app/page.tsx

@@ -1,9 +1,11 @@
-import { FormEvent } from "react";
-import { allWines, insertWine, allProducers } from "~/server/db";
+import { getProducers } from "~/server/actions/allProducers";
+import { getWines } from "../server/actions/allWines";
 import CreateWine from "./CreateWine";
-
 export const dynamic = "force-dynamic";
 
+const allWines = await getWines();
+const allProducers = await getProducers();
+
 function WineCards() {
   return (
     <>
@@ -21,7 +23,7 @@ export default async function HomePage() {
     <main className="">
       <div className="container ">
         <h1>Yes hello</h1>
-        {/* <CreateWine  /> */}
+        <CreateWine />
         <WineCards />
       </div>
     </main>

src/server/actions/addWine.ts

@@ -0,0 +1,11 @@
+'use server'
+import { db } from '../db/index'
+import { wines } from '../db/schema'
+
+export const addWine = async (producer: string, name: string) => {
+    await db.insert(wines).values({
+      producer: producer,
+      name: name,
+    })
+    .returning();
+  };

src/server/actions/allProducers.ts

@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getProducers(){
+    return db.query.producers.findMany();
+}

src/server/actions/allWines.ts

@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getWines(){
+    return db.query.wines.findMany();
+}

src/server/db/schema.ts

@@ -1,5 +1,3 @@
-import { drizzle } from 'drizzle-orm/vercel-postgres';
-import { sql } from "@vercel/postgres";
 import {
   pgTableCreator,
   text,