"use client";

import { useState } from 'react';
import { Button, Collapse, Stack, Text } from '@photonix/ultimate';

export default function CollapseBasicExample() {
    const [isOpen, setIsOpen] = useState(true);

    return (
        <Stack gap="md">
            <Button variant="secondary" onClick={() => setIsOpen((value) => !value)}>
                {isOpen ? 'Hide details' : 'Show details'}
            </Button>
            <Collapse isOpen={isOpen}>
                <Text variant="body-md" color="secondary">
                    The content stays in the document flow while the container animates between states.
                </Text>
            </Collapse>
        </Stack>
    );
}