Here is an unfinished client react typescript component I have

"use client";

import { Button } from "@/components/ui/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { LANGUAGE_MAP } from "@/const/language-map"; import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod";

type Props = { videoCount: { [key: string]: { language: string; superBeginner: number; beginner: number; intermediate: number; advanced: number; total: number; }; }; };

const VideoSearchFormValuesSchema = z.object({ sortBy: z.string(), language: z.string(), difficulty: z.string(), });

type VideoSearchFormValues = z.infer<typeof VideoSearchFormValuesSchema>;

const VideoSearch = ({ videoCount }: Props) => { const form = useForm<VideoSearchFormValues>({ resolver: zodResolver(VideoSearchFormValuesSchema), defaultValues: { sortBy: "datePublishedDesc", language: "Spanish", difficulty: "all", }, });

const onSubmit = (data: any) => { console.log("Search data:", data); };

const languages = Object.keys(LANGUAGE_MAP) .filter((lang) => !!videoCount[lang]) .sort((a, b) => videoCount[b].total - videoCount[a].total); const difficulties = [ { value: "all", label: "All" }, { value: "superBeginner", label: "Super Beginner" }, { value: "beginner", label: "Beginner" }, { value: "intermediate", label: "Intermediate" }, { value: "advanced", label: "Advanced" }, ] as const;

const watchedLanguage = form.watch("language"); form.watch("sortBy"); form.watch("difficulty");

useEffect(() => { form.setValue("difficulty", "all"); }, [watchedLanguage]);

return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> <div className="grid grid-cols-1 gap-4 items-end sm:grid-cols-4"> <div> <FormField name="sortBy" control={form.control} render={({ field }) => ( <FormItem> <FormLabel htmlFor="sortBy">Sort By</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} > <FormControl> <SelectTrigger className="w-64 sm:w-32 md:w-48"> <SelectValue placeholder="Sorted By" /> </SelectTrigger> </FormControl> <SelectContent> <SelectItem value="datePublishedDesc"> New First </SelectItem> <SelectItem value="datePublishedAsc"> Old First </SelectItem> <SelectItem value="lengthDesc">Long First</SelectItem> <SelectItem value="lengthAsc">Short First</SelectItem> <SelectItem value="difficultyDesc"> Difficult First </SelectItem> <SelectItem value="difficultyAsc">Easy First</SelectItem> </SelectContent> </Select> <FormMessage /> </FormItem> )} /> </div> <div> <FormField name="language" control={form.control} render={({ field }) => ( <FormItem> <FormLabel htmlFor="language">Language</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} > <FormControl> <SelectTrigger className="w-64 sm:w-32 md:w-48"> <SelectValue placeholder="Select Language" /> </SelectTrigger> </FormControl> <SelectContent> {languages.map((lang) => ( <SelectItem key={lang} value={lang}> {${lang} (${videoCount[lang]["total"]})} </SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )} /> </div> <div> <FormField name="difficulty" control={form.control} render={({ field }) => ( <FormItem> <FormLabel htmlFor="difficulty">Difficulty</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value} > <FormControl> <SelectTrigger className="w-64 sm:w-32 md:w-48"> <SelectValue placeholder="Select Difficulty" /> </SelectTrigger> </FormControl> <SelectContent> {difficulties.map((diff) => ( <SelectItem key={diff.value} value={diff.value}> {${diff.label} (${videoCount[form.getValues("language")][diff.value === "all" ? "total" : diff.value]})} </SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )} /> </div> <Button type="submit" className="m-[2px]"> Search </Button> </div> </form> </Form> ); };

export default VideoSearch;

Write a next.js typescript server action that uses drizzle orm to get videos from table "videos" using columns "upload_date", "duration", "score", and "language". Make sure to exclude videos that are shorter than 2 minutes