import { Widgetsubgroup } from "@/models/widget";
import { List, Typography } from "@mui/material";
import WidgetDemoBlock from "./WidgetDemoBlock";

interface WidgetsListProps {
  componentSubgroup: Widgetsubgroup;
}
function WidgetsList(props: WidgetsListProps) {
  return (
    <div
      style={{
        width: `100%`,
        marginTop: "1rem",
        marginLeft: "1rem",
      }}
    >
      <Typography
        variant="h4"
        style={{
          fontWeight: "bold",
        }}
      >
        {props.componentSubgroup.title}
      </Typography>
      <List>
        {props.componentSubgroup.widgets.map((item, index) => (
          <WidgetDemoBlock
            key={`widget_${index}_${item.title}`}
            title={item.title}
            codeUrl={item.codeUrl}
            demoUrl={item.demoUrl}
            rawCodeUrl={item.rawCodeUrl}
            description={item.description}
            id={item.id.split("/").slice(-1)[0]}
          />
        ))}
      </List>
    </div>
  );
}
export default WidgetsList;