import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
import { Card, Text, Container } from '@mantine/core';

export function Camara_noir() {
  return (
    <AppShellWithMenu>
      <Container
        size="lg"
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 16,
        }}
      >
        <Card shadow="sm" padding="xl" radius="md" withBorder>
          <Text size="lg" mb="md">
            Cámara Noir en Vivo
          </Text>
          <img
            src="http://10.8.0.9:8000/video"
            alt="Stream MJPEG en vivo desde Raspberry Pi"
            style={{
              width: '640px',
              height: '480px',
              borderRadius: '8px',
              border: '1px solid #ccc',
              objectFit: 'cover',
            }}
          />
          <Text size="sm" color="dimmed" mt="sm">
            Transmisión MJPEG en vivo vía FastAPI / libcamera-vid
          </Text>
        </Card>
      </Container>
    </AppShellWithMenu>
  );
}
