'use client';

import { Card } from '@/ui/Card';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import React from 'react';

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 (
    <Card bg="surface-charcoal" borderColor="outline-steel" rounded="lg" position="relative" overflow="hidden">
      {/* Subtle top accent line */}
      <Stack 
        position="absolute" 
        top="0" 
        left="0" 
        w="full" 
        h="1px" 
        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
      >{null}</Stack>
      
      <Stack p={{ base: 6, md: 8 }}>
        <Stack as="header" mb={8} align="center">
          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block textAlign="center">
            {title}
          </Text>
          {description && (
            <Text size="sm" color="text-med" block textAlign="center">
              {description}
            </Text>
          )}
        </Stack>
        
        {children}
      </Stack>
    </Card>
  );
}