import SiteInfoInnerPane from "./SiteInfoInnerPane";
import { TableList, TableListRow } from "../../tables/TableList/TableList";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import { EmptyArea } from "../EmptyArea/EmptyArea";
import { Button } from "../../buttons/Button/Button";
import {
	InnerPaneSidebar,
	InnerPaneSidebarHeader,
	InnerPaneSidebarContent,
} from "../InnerPaneSidebar/InnerPaneSidebar";

<Meta title="Modules/SiteInfoInnerPane" component={SiteInfoInnerPane} />

# Basic

<Canvas>
	<Story name="Basic">
        <SiteInfoInnerPane>
            <TableList>
                <li className="SiteInfoEnvironment">
                    <TableList stripes={false}>
                        <TableListRow label="Local Environment" className="LocalEnvironment">
                            Testing&nbsp;<span className="--Color--Gray75">5.0.0</span>
                        </TableListRow>
                        <TableListRow label="Web Server">nginx</TableListRow>
                        <TableListRow label="PHP Version">11.2</TableListRow>
                        <TableListRow label="MySQL Version">10.0</TableListRow>
                    </TableList>
                </li>
                <TableListRow label="Label">Some Content</TableListRow>
                <TableListRow label="Another Label">More Content</TableListRow>
                <TableListRow label="And Another Label">Some More Content</TableListRow>
            </TableList>
        </SiteInfoInnerPane>
	</Story>
</Canvas>

# With `<InnerPaneSidebar />`

<Canvas>
	<Story name="With InnerPaneSidebar">
        	<SiteInfoInnerPane>
                <TableList>
                    <li className="SiteInfoEnvironment">
                        <TableList stripes={false}>
                            <TableListRow label="Local Environment" className="LocalEnvironment">
                                Testing&nbsp;
                                <span className="--Color--Gray75">5.0.0</span>
                            </TableListRow>
                            <TableListRow label="Web Server">nginx</TableListRow>
                            <TableListRow label="PHP Version">11.2</TableListRow>
                            <TableListRow label="MySQL Version">10.0</TableListRow>
                        </TableList>
                    </li>
                    <TableListRow label="Label">Some Content</TableListRow>
                    <TableListRow label="Another Label">More Content</TableListRow>
                    <TableListRow label="And Another Label">Some More Content</TableListRow>
                </TableList>
                <InnerPaneSidebar>
                    <InnerPaneSidebarHeader title="Notes" />
                    <InnerPaneSidebarContent>
                        <EmptyArea border={false}>
                            No notes added<br />
                            to this site<br /><br />
                            <Button>+ Add Site</Button>
                        </EmptyArea>
                    </InnerPaneSidebarContent>
                </InnerPaneSidebar>
        </SiteInfoInnerPane>
	</Story>
</Canvas>