import { wrapFieldsWithMeta } from "tinacms";
import { SocialIcons } from "@wp2/helpers/dist/client";
import React from "react";
export const SocialInput = wrapFieldsWithMeta(({ input: { value, onChange, ...input } }) => {
    return (<div className="flex gap-2">
      {Object.entries(SocialIcons).map(([key, { Icon, color }]) => (<div key={key} className={`rounded-md  ${value === key ? "border-2 border-blue-500" : "cursor-pointer"}`}>
          <Icon style={{ color }} className="h-10 w-10 p-2" key={key} onClick={() => onChange(key)}/>
        </div>))}
    </div>);
});