import styled from "styled-components";
import Button, { Props as Item } from "./button";

const CardStack: React.FC<{ items: Item[] }> = ({ items }) => <Stack>
    {items.map((item, index) => <Button
        key={index}
        {...item}
    />)}
</Stack>;

const Stack = styled.div`
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: ${({ theme }) => theme.gap};
    justify-content: center;

    max-width: 50%;
    @media (max-width: 750px) {
        max-width: unset;
    }

    a {
        text-decoration: none;
        color: ${({ theme }) => theme.text};
    }
`;

export const asCardStack = (items: Array<Item | string>) => (
    <CardStack
        items={items.map(item =>
            typeof item === "string"
                ? { content: item }
                : item
        )}
    />
);

export default CardStack;