import React from "react";
import { Card, Text } from "@tremor/react";
import VariableTextArea from "../variable_textarea";

interface DeveloperMessageCardProps {
  value: string;
  onChange: (value: string) => void;
}

const DeveloperMessageCard: React.FC<DeveloperMessageCardProps> = ({ value, onChange }) => {
  return (
    <Card className="p-3">
      <Text className="block mb-2 text-sm font-medium">Developer message</Text>
      <Text className="text-gray-500 text-xs mb-2">Optional system instructions for the model</Text>
      <VariableTextArea value={value} onChange={onChange} rows={3} placeholder="e.g., You are a helpful assistant..." />
    </Card>
  );
};

export default DeveloperMessageCard;
