"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

export function FieldLabel({ children }: { children: React.ReactNode }) {
    return (
        <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-[0.09em] font-['Lexend_Deca'] mb-1.5">
            {children}
        </label>
    )
}

export function SettingRow({
    icon,
    title,
    description,
    children,
    danger,
}: {
    icon?: React.ReactNode
    title: string
    description?: string
    children: React.ReactNode
    danger?: boolean
}) {
    return (
        <div className={cn(
            "flex items-center justify-between gap-4 p-4 rounded-xl border transition-colors",
            danger
                ? "bg-red-50/50 border-red-100"
                : "bg-white/40 border-white/60 hover:bg-white/60"
        )}>
            <div className="flex items-center gap-3 min-w-0">
                {icon && (
                    <div className={cn(
                        "h-8 w-8 rounded-lg flex items-center justify-center shrink-0",
                        danger ? "bg-red-100 text-red-500" : "bg-[#6C63FF]/10 text-[#6C63FF]"
                    )}>
                        {icon}
                    </div>
                )}
                <div className="min-w-0">
                    <p className={cn("text-[13px] font-semibold", danger ? "text-red-600" : "text-gray-900")}>
                        {title}
                    </p>
                    {description && (
                        <p className="text-[11px] text-gray-400 mt-0.5">{description}</p>
                    )}
                </div>
            </div>
            <div className="shrink-0">{children}</div>
        </div>
    )
}

export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
    return (
        <div className={cn(
            "rounded-2xl border border-white/40 bg-white/50 backdrop-blur-[15px] shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] overflow-hidden",
            className
        )}>
            {children}
        </div>
    )
}

export function CardHeader({ title, description, extra }: { title: string; description: string; extra?: React.ReactNode }) {
    return (
        <div className="px-6 py-4 border-b border-gray-100/80 flex items-center justify-between gap-4">
            <div>
                <h2 className="text-[15px] font-extrabold text-gray-900 font-['Lexend']">{title}</h2>
                <p className="text-[11px] text-gray-400 mt-0.5 font-['Lexend_Deca']">{description}</p>
            </div>
            {extra && <div className="shrink-0">{extra}</div>}
        </div>
    )
}