'use client';

import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';

/**
 * Switch component
 ** description
 */

export const Switch = forwardRef<
    HTMLInputElement,
    SwitchMainProps & LabelPlacement
>(({ icon, selected = false, ...props }, ref) => (
    <div className={'m3 m3-switch'}>
        <CheckBoxLayout
            {...props}
            className={`m3 ${props.className ?? ''}`.trimEnd()}
            ref={ref}
            type={'checkbox'}
        />
        <svg>
            <rect className={'m3 m3-switch-track'} />
            <circle className={'m3 m3-switch-handler'} />
            <circle className={'m3 m3-switch-handler-state-layer'} />
            <g>
                {icon && !selected && (
                    <text className={'m3 m3-icon-unchecked'}>close</text>
                )}
                {icon && <text className={'m3 m3-icon-checked'}>check</text>}
            </g>
        </svg>
    </div>
));
