import { Fab } from 'components';
import { Row, StyleSystemThemedProps } from 'components/layout';
import { useSettings } from 'hooks';
import { MicOff, PhoneCall, Refresh, SettingsFill, VideoCameraOff } from 'icons';
import { FC } from 'react';

export const Action: FC<ActionType> = ({ ...props }) => {
  const { isChatPopUpOpen } = useSettings();

  const size = isChatPopUpOpen ? 'small' : 'medium';
  const mx = isChatPopUpOpen ? '2xs' : 'xs';
  return (
    <Row alignItems="center" {...props}>
      <Fab
        onPress={() => {}}
        variant="plain"
        mx={mx}
        sizeVariant={size}
        colorVariant="base-opacity-06"
        hoverColorVariant="base-02"
        centerElement={<VideoCameraOff colorVariant="body" />}
      />
      <Fab
        onPress={() => {}}
        variant="plain"
        mx={mx}
        sizeVariant={size}
        colorVariant="base-opacity-06"
        hoverColorVariant="base-02"
        centerElement={<MicOff colorVariant="body" />}
      />
      <Fab
        onPress={() => {}}
        variant="plain"
        mx={mx}
        sizeVariant={size}
        colorVariant="base-opacity-06"
        hoverColorVariant="base-02"
        centerElement={<Refresh colorVariant="body" />}
      />
      <Fab
        onPress={() => {}}
        variant="plain"
        mx={mx}
        sizeVariant={size}
        colorVariant="base-opacity-06"
        hoverColorVariant="base-02"
        centerElement={<SettingsFill colorVariant="body" />}
      />
      <Fab
        onPress={() => {}}
        variant="plain"
        mx={mx}
        sizeVariant={size}
        colorVariant="secondary"
        hoverColorVariant="secondary-hover"
        centerElement={<PhoneCall colorVariant="white" />}
      />
    </Row>
  );
};
type ActionType = StyleSystemThemedProps;