import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { List, ListItem } from "../../../components/ui/list";

export default function ListPage() {
  return (
    <>
      <PageMeta
        title="React.js List Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js List Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Unordered List">
          <List variant="unordered">
            <ListItem>Item 1</ListItem>
            <ListItem>Item 2</ListItem>
            <ListItem>Item 3</ListItem>
          </List>
        </ComponentCard>

        <ComponentCard title="Ordered List">
          <List variant="ordered">
            <ListItem>First Item</ListItem>
            <ListItem>Second Item</ListItem>
            <ListItem>Third Item</ListItem>
          </List>
        </ComponentCard>

        <ComponentCard title="Button List">
          <List variant="button">
            <ListItem variant="button" onClick={() => alert("Clicked Item 1")}>
              Button Item 1
            </ListItem>
            <ListItem variant="button" onClick={() => alert("Clicked Item 2")}>
              Button Item 2
            </ListItem>
            <ListItem variant="button" onClick={() => alert("Clicked Item 3")}>
              Button Item 3
            </ListItem>
          </List>
        </ComponentCard>
      </div>
    </>
  );
}