import { Box, BoxProps, useColorModeValue } from '@chakra-ui/react';
import { ReactNode } from 'react';

interface AdminCardProps extends BoxProps {
  children: ReactNode;
  variant?: 'outline' | 'filled' | 'unstyled';
  hoverEffect?: boolean;
}

export const AdminCard = ({
  children,
  variant = 'outline',
  hoverEffect = false,
  ...props
}: AdminCardProps) => {
  const bg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const hoverBg = useColorModeValue('gray.50', 'gray.750');

  const variants = {
    outline: {
      bg,
      border: '1px solid',
      borderColor,
    },
    filled: {
      bg: useColorModeValue('gray.50', 'gray.750'),
    },
    unstyled: {},
  } as const;

  return (
    <Box
      borderRadius="lg"
      p={6}
      boxShadow="sm"
      transition="all 0.2s"
      _hover={hoverEffect ? { transform: 'translateY(-2px)', boxShadow: 'md' } : {}}
      {...variants[variant]}
      {...props}
    >
      {children}
    </Box>
  );
};
