import { Text } from "@fluentui/react-components";
import { useJailDetailPageStyles } from "./jailDetailPageStyles";

interface CodeListProps {
  items: string[];
  empty: string;
}

export function CodeList({ items, empty }: CodeListProps): React.JSX.Element {
  const styles = useJailDetailPageStyles();
  if (items.length === 0) {
    return <Text size={200} style={{ color: "var(--colorNeutralForeground3)" }}>{empty}</Text>;
  }

  return (
    <div className={styles.codeList}>
      {items.map((item, i) => (
        <span key={i} className={styles.codeItem}>
          {item}
        </span>
      ))}
    </div>
  );
}
