/** @format */

import React from 'react';
import { FiFolderPlus, FiLink2 } from 'react-icons/fi';
import { IconContext } from 'react-icons';
import styled from 'styled-components';
import { respondTo } from 'styles/mixins';

const Button = styled.button`
	position: relative;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	border: none;
	background: var(--lavender);
	cursor: pointer;
	margin: 1.4rem 0.5rem 0 0;
	cursor: pointer;
	& > svg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	${respondTo.xs`
		margin: 0.6rem 0.6rem 0 0;
	`}
	${respondTo.sm`
		margin: 1rem 0.6rem 0 0;
	`}
	${respondTo.md`
		margin: 0.8rem 0.6rem 0 0;
	`}
`;

export const Filebtn = ({ open, toggleurl, key1, key2 }) => {
	return (
		<>
			<Button onClick={open} key={key1} aria-label="Fileupload button">
				<IconContext.Provider value={{ size: '1.1rem', color: '#303133' }}>
					<FiFolderPlus />
				</IconContext.Provider>
			</Button>
			<Button onClick={toggleurl} key={key2} aria-label="Url button">
				<IconContext.Provider value={{ size: '1.1rem', color: '#303133' }}>
					<FiLink2 />
				</IconContext.Provider>
			</Button>
		</>
	);
};