'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface AuthCardProps {
  children: React.ReactNode;
  title: string;
  description?: string;
}

/**
 * AuthCard
 * 
 * A matte surface container for auth forms with a subtle accent glow.
 */
export function AuthCard({ children, title, description }: AuthCardProps) {
  return (
    <Box bg="surface-charcoal" border borderColor="outline-steel" rounded="lg" shadow="card" position="relative" overflow="hidden">
      {/* Subtle top accent line */}
      <Box 
        position="absolute" 
        top="0" 
        left="0" 
        w="full" 
        h="1px" 
        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
      />
      
      <Box p={{ base: 6, md: 8 }}>
        <Box as="header" mb={8} textAlign="center">
          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block>
            {title}
          </Text>
          {description && (
            <Text size="sm" color="text-med" block>
              {description}
            </Text>
          )}
        </Box>
        
        {children}
      </Box>
    </Box>
  );
}