import React from 'react';
import LoaderWrapper from './loader-wrapper';

const CLASS_NAME = 'TableCellLoader';

type Props = {
    variant?:
    | 'sm'
    | 'md'
    | 'lg'
    | 'image'
    | 'image-lg'
    | 'thick'
    | 'extra-thick'
    | 'thin'
    | 'thin-lg'
    | 'thin-sm'
    | 'thick-lg';
};

const TableCellLoader: React.FC<Props> = ({ variant }) => (
    <div>
        <LoaderWrapper
            content={ () => (
                <div className={ `${CLASS_NAME}-line` }>
                    <div className={ `${CLASS_NAME}-item${(variant ? `-${variant}` : '')}` } />
                </div>
            ) }
        />
    </div>
);

export default TableCellLoader;