Reshaped Autocomplete

import * as React from "react";
import { Reshaped } from "reshaped/bundle";
import type { AutocompleteProps } from "reshaped/bundle";
import Autocomplete from "@/components/ui/reshaped-autocomplete";

export default function Demo() {
  const [value, setValue] = React.useState("");
  const options = ["Pizza", "Pie", "Ice-cream"];
  const handleChange: AutocompleteProps["onChange"] = (args) =>
    setValue(args.value);

  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 360, width: "100%", margin: "0 auto", padding: 24 }}>
        <Autocomplete
          name="fruit"
          placeholder="Pick your food"
          value={value}
          onChange={handleChange}
        >
          {options.map((option) => {
            if (!option.toLowerCase().includes(value.toLowerCase())) return;
            return (
              <Autocomplete.Item key={option} value={option}>
                {option}
              </Autocomplete.Item>
            );
          })}
        </Autocomplete>
      </div>
    </Reshaped>
  );
}