import React from "react";
import ListItemBase from "./ListItemBase";
import AssetItem from "./AssetItem";

const ZoneItemComponent: React.FC<ZoneItemProps> = ({
  item,
  isActive,
  expanded,
  remove,
  activeAssetId,
  onSelect,
  onRename,
  onToggleExpand,
  onAssetClick,
  onAssetRename,
}) => (
  <ListItemBase
    id={item.id}
    name={item.name}
    isActive={isActive}
    canEdit={item.id !== "unassigned-zone"}
    remove={remove}
    expandable={Boolean(item.assets?.length)}
    expanded={expanded}
    onClick={() => {
      onSelect(item.id);
      onToggleExpand(item.id);
    }}
    onRename={onRename}
    onToggleExpand={() => onToggleExpand(item.id)}
  >
    {item.assets?.map((asset) => (
      <AssetItem
        key={asset.id}
        asset={asset}
        isActive={activeAssetId === asset.id}
        remove={remove}
        onClick={onAssetClick}
        onRename={onAssetRename}
      />
    ))}
  </ListItemBase>
);

export default ZoneItemComponent;
