import React from "react";
import styled from "styled-components";

type Orientation = "vertical" | "horizontal";

interface LinearLayoutProps {
    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
    fullWidth?: boolean;
    orientation?: Orientation;
}

const Component = styled.div<{ orientation?: Orientation }>`
    display: flex;
    flex-direction: ${({ orientation }) => orientation === "vertical" ? "column" : "row" };
`;

const LinearLayout: React.FC<LinearLayoutProps> = ({
    as = "div",
    orientation = "vertical",
    ...props
}) => {
    return (
        <Component
            as={as}
            {...props}
        />
    );
};

export default LinearLayout;