import React from 'react';
import { Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
import divineShepherd from '/divine-shepherd.jpg';

function Schedule() {
  const theme = useTheme();
  const isMobile = useMediaQuery('(max-width: 768px)');
  return (
    <div
      style={{
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundImage: `url(${isMobile ? 'none' : divineShepherd})`,
        backgroundSize: 'cover',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          width: '90%',
        }}
      >
        <Paper
          elevation={3}
          sx={{
            borderRadius: '8px',
            width: 512,
            px: 2,
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ width: '35%' }}>
              <p>April 26, 2025</p>
            </div>
            <div style={{ width: '65%' }}>
              <Typography variant="h5">Wedding Schedule</Typography>
            </div>
          </div>
          <hr style={{ width: '100%' }} />
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ width: '35%' }}>
              <p>2:00 PM</p>
            </div>
            <div style={{ width: '65%' }}>
              <Typography variant="h6">Ceremony</Typography>
              <p>
                Divine Shepherd
                <br />
                <a
                  href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9"
                  style={{ color: theme.palette.primary.main }}
                >
                  15005 Q St, Omaha, NE 68137
                </a>
              </p>
            </div>
          </div>
          <hr style={{ width: '100%' }} />
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ width: '35%' }}>
              <p>5:00 PM</p>
            </div>
            <div style={{ width: '65%' }}>
              <Typography variant="h6">Reception</Typography>
              <p>
                A Venue on the Ridge
                <br />
                <a
                  href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA"
                  style={{ color: theme.palette.primary.main }}
                >
                  20033 Elkhorn Ridge Dr, Elkhorn, NE 68022
                </a>
              </p>
            </div>
          </div>
        </Paper>
      </div>
    </div>
  );
}

export default Schedule;