import React, {FC} from "react";
import {StepAnchorHandles} from "./StepAnchorHandles";
import {ColorOptionWithCustomTint, request} from "./tree/Color";
import {__} from "./globals";

export type StepAnchorTieredBaseProps = ColorOptionWithCustomTint & {
}

export const StepAnchorTieredBase: FC<StepAnchorTieredBaseProps> = ({color}) => {
    return <div className={`relative flex items-center justify-center w-3 h-3 rounded-full ${request(color).background(90)}`}>
        <StepAnchorHandles isFirst={true} handles={{bottom: false, left: false, right: false}}>
            <div className={`w-1 h-1 rounded-full ${request(color).background(10)}`}></div>
        </StepAnchorHandles>
        <div className={`absolute top-3 flex items-center space-x-1 text-smaller-3 ${request(color).text(60)}`}>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-3 h-3">
                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>
            <span>{__('Tiered')}</span>
        </div>
    </div>
}