'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

interface PageCardProps {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
  icon?: ReactNode;
  headerActions?: ReactNode;
  noHeaderPadding?: boolean;
}

export function PageCard({
  children,
  className,
  title,
  description,
  icon,
  headerActions,
  noHeaderPadding = false,
}: PageCardProps) {
  const hasHeader = title || description || icon || headerActions;

  return (
    <Card className={className}>
      {hasHeader && (
        <CardHeader className={cn(
          'flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4',
          noHeaderPadding && 'pb-0'
        )}>
          <div>
            {title && (
              <CardTitle className={cn(
                'flex items-center gap-2',
                description ? 'text-lg font-medium' : 'text-xl font-semibold'
              )}>
                {icon && <span className="text-muted-foreground">{icon}</span>}
                {title}
              </CardTitle>
            )}
            {description && (
              <CardDescription className="mt-1">{description}</CardDescription>
            )}
          </div>
          {headerActions && (
            <div className="flex items-center gap-2">
              {headerActions}
            </div>
          )}
        </CardHeader>
      )}
      <CardContent>{children}</CardContent>
    </Card>
  );
}

export default PageCard;
