"use client"

import type { ReactNode } from "react"

import { cn } from "../../../lib/utils"
import { CardDescription, CardHeader, CardTitle } from "../../ui/card"
import { Skeleton } from "../../ui/skeleton"
import type { SettingsCardClassNames } from "./settings-card"

export interface SettingsCardHeaderProps {
    className?: string
    classNames?: SettingsCardClassNames
    description?: ReactNode
    isPending?: boolean
    title: ReactNode
}

export function SettingsCardHeader({
    className,
    classNames,
    description,
    isPending,
    title
}: SettingsCardHeaderProps) {
    return (
        <CardHeader className={cn(classNames?.header, className)}>
            {isPending ? (
                <>
                    <Skeleton
                        className={cn(
                            "my-0.5 h-5 w-1/3 md:h-5.5",
                            classNames?.skeleton
                        )}
                    />

                    {description && (
                        <Skeleton
                            className={cn(
                                "mt-1.5 mb-0.5 h-3 w-2/3 md:h-3.5",
                                classNames?.skeleton
                            )}
                        />
                    )}
                </>
            ) : (
                <>
                    <CardTitle
                        className={cn("text-lg md:text-xl", classNames?.title)}
                    >
                        {title}
                    </CardTitle>

                    {description && (
                        <CardDescription
                            className={cn(
                                "text-xs md:text-sm",
                                classNames?.description
                            )}
                        >
                            {description}
                        </CardDescription>
                    )}
                </>
            )}
        </CardHeader>
    )
}