import {JSX} from 'react';
import {Navigation} from '../components';

export function ChannelsView(): JSX.Element {
  return (
    <>
      <Navigation />
      <div
        style={{
          padding: '2rem',
          maxWidth: '1200px',
          margin: '0 auto'
        }}>
        <h1>Channels</h1>
        <div
          style={{
            background: '#f5f5f5',
            padding: '1rem',
            borderRadius: '8px',
            marginBottom: '2rem'
          }}>
          <p>This is a protected view that requires authentication.</p>
          <p>If you can see this, you are successfully authenticated!</p>
        </div>

        <div
          style={{
            background: 'white',
            padding: '1rem',
            borderRadius: '8px',
            border: '1px solid #ddd'
          }}>
          <h3>Channel List</h3>
          <p>No channels available at the moment.</p>
          <p>This view demonstrates the AuthorizedOnly middleware in action.</p>
        </div>
      </div>
    </>
  );
}
