import type { ReactNode } from 'react';
import styled, { css } from 'styled-components';
import tw from 'twin.macro';

import Select from '@/components/elements/Select';
import Spinner from '@/components/elements/Spinner';
import FadeTransition from '@/components/elements/transitions/FadeTransition';

const Container = styled.div<{ visible?: boolean }>`
    ${tw`relative`};

    ${props =>
        props.visible &&
        css`
            & ${Select} {
                background-image: none;
            }
        `};
`;

function InputSpinner({ visible, children }: { visible: boolean; children: ReactNode }) {
    return (
        <Container visible={visible}>
            <FadeTransition show={visible} duration="duration-150" appear unmount>
                <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                    <Spinner size="small" />
                </div>
            </FadeTransition>

            {children}
        </Container>
    );
}

export default InputSpinner;