import { Container } from "react-bootstrap";
import LoginCard from "../components/LoginCard";
import React, { useEffect, useState } from 'react';
import { getPublicAppConfig } from '../api/model/Settings';

function Login() {
  const [bgUrl, setBgUrl] = useState(null);

  useEffect(() => {
    (async () => {
      const data = await getPublicAppConfig(['background_image']);
      if (data?.background_image) setBgUrl(data.background_image);
    })();
  }, []);

  const bgStyle = bgUrl ? {
    backgroundImage: `url(${bgUrl})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh'
  } : {};

  return (
    <Container
      fluid
      className="flex-grow-1 login-bg py-5"
      style={bgStyle}
    >
      <div className="d-flex flex-column justify-content-center h-100">
        <LoginCard />
      </div>
      <div className="m-auto">
        <h2 className="text-center my-5 text-white fw-semibold">eTržnice</h2>
      </div>
    </Container>
  );
}

export default Login;