import * as React from "react";
import { PropertyControls, ControlType } from "framer";

// Define type of property
interface Props {
    width: number;
    listHeaderTitle: string;
}
export class RadioGroup extends React.Component<Props> {
    // Set default properties
    static defaultProps = {
        width: 375,
        height: 52
    };

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        children: {
            type: ControlType.Array,
            propertyControl: { type: ControlType.ComponentInstance }
        }
    };

    render() {
        return (
            <div
                style={{
                    display: "flex",
                    width: "100%",
                    height: "100%",
                    alignItems: "center",
                    justifyContent: "space-between"
                }}
            >
                {React.Children.map(this.props.children, child => {
                    return React.cloneElement(child as any, {
                        style: { position: "relative" }
                    });
                })}
            </div>
        );
    }
}

// Styles
const wrapperStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    display: "flex",
    background: "rgba(255, 0,0,0.3)"
};