import React from 'react';
import { ImageWithFallback } from 'xertica-ui/ui';
import { LanguageSelector } from 'xertica-ui/brand';

interface AuthPageShellProps {
  imageSrc: string;
  imageAlt: string;
  children: React.ReactNode;
}

export function AuthPageShell({ imageSrc, imageAlt, children }: AuthPageShellProps) {
  return (
    <div className="h-screen w-full flex overflow-y-auto">
      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
        <ImageWithFallback
          src={imageSrc}
          alt={imageAlt}
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
      </div>

      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
        <div className="absolute top-4 right-4 z-20">
          <LanguageSelector variant="minimal" showIcon={false} />
        </div>
        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
        <div className="w-full max-w-sm space-y-6 relative z-10">{children}</div>
      </div>
    </div>
  );
}