import React from "react";
import { Button } from "../../..";
import { IButton } from "../../Button/Button";
import { getClassName } from "../../utils";

import './ActionSheerItem.css'

type IActionSheetItem = {
  children: React.ReactNode,
  before?: React.ReactNode,
  after?: React.ReactNode,
  iconDefaultSize?: number,
  align?: IButton["align"],
  size?: string,
}

const ActionSheetItem = ({
  children,
  before,
  after,
  align = "left",
  iconDefaultSize = 16,
  size = "m"
}: IActionSheetItem) => {
  return <Button
    after={!after ? <div style={{ width: iconDefaultSize }}></div> : after}
    before={!before ? <div style={{ width: iconDefaultSize }}></div> : before}
    align={align}
    mode="tertiary"
    size={size}
    stretched
  >
    {children}
  </Button>
}

export default ActionSheetItem;