import React from 'react';
import { Box, Typography } from '@mui/material';

interface CardContainerProps {
  title: string;
  subtitle: string;
  action?: React.ReactNode;
  children?: React.ReactNode;
  highlighted?: boolean;
}

export function CardContainer({
  title,
  subtitle,
  action,
  children,
  highlighted,
}: CardContainerProps) {
  return (
    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
      <Box
        sx={{
          marginInline: 'auto',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          borderRadius: 1,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: { xs: 'flex-start', sm: 'center' },
            flexDirection: { xs: 'column', sm: 'row' },
            bgcolor: highlighted ? 'background.primary' : 'background.default',
            p: 2,
            borderRadius: 1,
            gap: { xs: 1, sm: 0 },
          }}
        >
          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <Typography
              variant="h6"
              color={highlighted ? 'primary.main' : 'text.primary'}
            >
              {title}
            </Typography>
            <Typography
              color={highlighted ? 'primary.main' : 'text.secondary'}
              variant="body2"
            >
              {subtitle}
            </Typography>
          </Box>
          {action}
        </Box>

        {children}
      </Box>
    </Box>
  );
}
