import type * as React from 'react'

import { Card, CardContent, CardHeader } from '@/components/ui/card'

type AppSectionProps = {
  title: string
  description?: string
  action?: React.ReactNode
  children: React.ReactNode
}

export function AppSection({ title, description, action, children }: AppSectionProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-start justify-between gap-3">
        <div>
          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
        </div>
        {action}
      </CardHeader>
      <CardContent>{children}</CardContent>
    </Card>
  )
}