import React from "react";
import { IconChevronRight } from "../../components/Icon";
interface ActionItemProps {
  action: {
    icon: string;
    actionName: string;
    detail: string;
    colorIconLeft: string;
    colorIconRight: string;
  };
}

const ActionItem: React.FunctionComponent = ({
  action,
  ...props
}: ActionItemProps) => {
  const { icon, actionName, detail } = action;
  return (
    <div
      className="flex justify-between outline-none items-center py-[14px] px-[8px] border-b-[1px] border-[#ccc]"
      {...props}
    >
      <div className="flex gap-[10px] flex-1 items-center">
        {icon}
        <p className="">{actionName}</p>
      </div>
      <div className="flex gap-[3px] flex-1 items-center justify-end">
        <p className="text-xs text-gray-500">{detail}</p>
        <IconChevronRight className="text-[#000] w-[16px]" />
      </div>
    </div>
  );
};
export default ActionItem;