import React from "react";
import { List } from "semantic-ui-react";
import Moment from "react-moment";
import "moment/locale/es";

const StreamInfo = props => {
  const { stream } = props;
  return (
    <>
      <List>
        <List.Item>
          <List.Icon name="users" />
          <List.Content>
            <List.Header>{`Usuarios escuchando: ${stream.listeners}`}</List.Header>
          </List.Content>
        </List.Item>
        <List.Item>
          <List.Icon name="clock" />
          <List.Content>
            <List.Header>
              Transmitiendo{" "}
              <Moment date={stream.stream_start} fromNow locale="es" />
            </List.Header>
          </List.Content>
        </List.Item>
        <List.Item>
          <List.Icon name="info" verticalAlign="middle" />
          <List.Content>
            <List.Header>{stream.server_name}</List.Header>
            {stream.server_description}
          </List.Content>
        </List.Item>
        <List.Item>
          <List.Icon name="file audio outline" verticalAlign="middle" />
          <List.Content>
            <List.Header>
              {stream.audio_channels === 2 ? "Stereo" : "Mono"}
            </List.Header>
            {`Bitrate: ${stream["ice-bitrate"]} kbps, ${stream["ice-samplerate"]} Hz`}
          </List.Content>
        </List.Item>
        <List.Item>
          <List.Icon name="sound" verticalAlign="middle" />
          <List.Content>
            <List.Header>Canción actual</List.Header>
            {`${stream.artist} - ${stream.title}`}
          </List.Content>
        </List.Item>
      </List>
      <a
        href={`${stream.listenurl.replace(
          "http://bienvenidoainternet.org:8000",
          "https://bienvenidoainternet.org:8443"
        )}.m3u`}
      >
        Descargar archivo m3u
      </a>
    </>
  );
};

export default StreamInfo;