aragrp/components/playground/playground-settings-card.tsx

"use client";

import { Settings2 } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { PlaygroundSettingsPanel } from "./playground-settings-panel";
import type { PlaygroundSettings } from "./types";

interface PlaygroundSettingsCardProps {
  settings: PlaygroundSettings;
  onChange: (settings: PlaygroundSettings) => void;
}

export function PlaygroundSettingsCard({
  settings,
  onChange,
}: PlaygroundSettingsCardProps) {
  return (
    <Card className="h-full">
      <CardHeader className="pb-4">
        <div className="flex items-center gap-2">
          <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <Settings2 className="size-4" aria-hidden />
          </div>
          <div>
            <CardTitle>تنظیمات گفتگو</CardTitle>
            <CardDescription>
              پیکربندی مدل و رفتار پاسخ‌دهی
            </CardDescription>
          </div>
        </div>
      </CardHeader>

      <CardContent>
        <PlaygroundSettingsPanel settings={settings} onChange={onChange} />
      </CardContent>
    </Card>
  );
}