---
interface Props {
    class?: string;
    name?: string;
    placeholder?: string;
    readonly?: boolean;
    rows?: number;
    value?: string;
}

const {
    class: className = '',
    name,
    placeholder,
    readonly = false,
    rows = 5,
    value,
} = Astro.props;
---

<textarea
    name={name}
    rows={rows}
    placeholder={placeholder}
    readonly={readonly}
    class:list={[
        'min-h-32 w-full rounded-[1.1rem] border border-[color:var(--color-line)] bg-white/90 px-4 py-3 text-[0.97rem] text-[var(--color-ink-900)] shadow-[var(--shadow-soft)] placeholder:text-[var(--color-copy)]/70',
        readonly ? 'cursor-default' : '',
        className,
    ]}
>{value}</textarea>