import type { ReactNode } from "react"
import { Card, CardContent } from "@/components/ui/card"

export function AdminSettingsCard({
  title,
  description,
  hint,
  children,
}: {
  title: string
  description: ReactNode
  hint?: ReactNode
  children: ReactNode
}) {
  return (
    <Card className="gap-0 py-0">
      <CardContent className="py-4">
        <div>
          <p className="font-medium">{title}</p>
          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
          {hint}
        </div>
        <div className="mt-4 space-y-4 border-t pt-4">{children}</div>
      </CardContent>
    </Card>
  )
}