import React from "react";
// @ts-ignore
import styling from "@devcake/styling";
import { Icon } from "../../Icon";

styling.link("components.select.icons.check", "components.icons.check");

export type ItemRenderer<T> = (
  item: T,
  selected: boolean
) => React.ReactNode;

export const DefaultRenderer: ItemRenderer<string> = (item, selected) => (
  <>
    <div className="font-normal block truncate">{item}</div>

    <div className="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
      {selected && <Icon icon={styling.get("components.select.icons.check")} className="h-5 w-5" />}
    </div>
  </>
);