import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Segment',
    component: 'x-segment',
    subcomponents: ['x-segment-item'],
    argTypes: {
        align: {
            options: ['left', 'center', 'evenly', 'between', 'right'],
            control: {
                type: 'radio',
            },
        },
    },
};
export const Simple = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item>Uno</x-segment-item>
	<x-segment-item>Dos</x-segment-item>
	<x-segment-item>Tres</x-segment-item>
</x-segment>`)
    .args({
    active: 0,
})
    .build();
export const Fluid = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item>Uno</x-segment-item>
	<x-segment-item>Dos</x-segment-item>
	<x-segment-item>Tres</x-segment-item>
</x-segment>`)
    .args({
    fluid: true,
    align: 'center',
})
    .build();
export const Block = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item>Uno</x-segment-item>
	<x-segment-item>Dos</x-segment-item>
	<x-segment-item>Tres</x-segment-item>
</x-segment>`)
    .args({
    block: true,
    align: 'center',
})
    .build();
export const WithIcons = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item icon="activity">Uno</x-segment-item>
	<x-segment-item icon="user">Dos</x-segment-item>
	<x-segment-item icon="dashboard">Tres</x-segment-item>
</x-segment>`)
    .args({})
    .build();
export const WithValues = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item value="one" icon="activity">Uno</x-segment-item>
	<x-segment-item value="two" icon="user">Dos</x-segment-item>
	<x-segment-item value="three" icon="dashboard">Tres</x-segment-item>
</x-segment>`)
    .args({})
    .build();
export const WithCompactIcons = new Builder(args => `<x-segment ${toProps(args)}>
	<x-segment-item icon="activity">Uno</x-segment-item>
	<x-segment-item icon="user">Dos</x-segment-item>
	<x-segment-item icon="dashboard">Tres</x-segment-item>
</x-segment>`)
    .args({
    compact: true,
})
    .build();
