import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const DotsButton = styled.button`
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;

    &:hover {
        background-color: #e0e0e0;
    }

    /* 점 스타일링 */
    .dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: #333;
        margin: 2px 0;
    }
`;

const VerticalDotsButton = ({ text, type = 'button', errorMessage, handleClick, size, width, height, borderColor, disabled, name }) => {

	return (
		<DotsButton
			onSubmit={e => e.preventDefault()}
			type={type}
			disabled={disabled}
			onClick={handleClick}
			size={size}
			bordercolor={borderColor}
			width={width}
			height={height}
			name={name}
		>
			<div className="dot"></div>
			<div className="dot"></div>
			<div className="dot"></div>
		</DotsButton>
	);
};

export default VerticalDotsButton;