import React from "react"
import { MagnifyingGlass } from "@medusajs/icons"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"

export default function VtSearchInput({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config || {}
  const placeholder = props.placeholder ?? "Search"
  const shortcut = props.shortcut ?? "⌘K"

  return (
    <div
      className={
        `flex items-center gap-3 w-full max-w-xl bg-white border border-grey-20 rounded-rounded shadow-sm px-4 py-2 ${
          props?.className ?? ""
        }`
      }
    >
      <MagnifyingGlass className="text-[#11314E]" />
      <input
        type="search"
        placeholder={placeholder}
        className="flex-1 bg-transparent outline-none text-[#11314E] placeholder:text-[#11314E]"
      />
      {shortcut && (
        <span className="text-[#11314E] border border-grey-30 rounded-rounded px-2 py-0.5 text-sm">
          {shortcut}
        </span>
      )}
    </div>
  )
}