import React from 'react'

const TextareaTab = (
    {
        headerText = "",
        textAreaValue = "",
        textAreaOnChange = () => { },
        secondaryBtnText = "",
        secondaryBtnClickFn = () => { },
        primaryBtnText = "Save",
        primaryBtnClickFn = () => { },
    }
) => {
    return (
        <div>
            <div className="text-[#8d8d8d]">{headerText}</div>
            <textarea value={textAreaValue} onChange={textAreaOnChange} className="relative flex flex-col min-h-[250px] mt-4 bg-[#f4f4f4] border border-[#a8a8a8] w-full p-5 items-center justify-center rounded-lg mb-5 text-medium text-[#525252]" cols="15" rows="10"></textarea>
            <div className="flex items-center gap-4">
                <button onClick={secondaryBtnClickFn} className="flex items-center rounded-md border border-[#C6C6C6] px-3 py-2 shadow-sm hover:bg-[#f4f4f4]">
                    {secondaryBtnText}
                </button>
                <button onClick={primaryBtnClickFn} className="flex items-center rounded-md bg-[#4F46E5] px-3 py-2 text-white shadow-sm">
                    {primaryBtnText}
                </button>
            </div>
        </div>

    )
}

export default TextareaTab;