import { type UserSignedExtensions as UserSignedExtensionsTy } from "../../../types/UserSignedExtension"

type Props = {
    userSignedExtensions: Partial<UserSignedExtensionsTy>
}
export const UserSignedExtensions = ({ userSignedExtensions }: Props) => (
    <div>
        {Object.entries(userSignedExtensions).map(([type]) => {
            switch (type) {
                case "CheckMortality": {
                    const mortality = userSignedExtensions[type]!
                    return (
                        <Input
                            readOnly
                            aria-label="Check Mortality"
                            type="number"
                            className="pr-10 mt-4"
                            placeholder={`Mortality: ${mortality.mortal ? `${mortality.period} blocks` : "inmortal"}`}
                        />
                    )
                }
                case "ChargeTransactionPayment": {
                    const payment = userSignedExtensions[type]!
                    return <div className="my-1">tip: {payment.toString()}</div>
                    return (
                        <Input
                            readOnly
                            aria-label="Charge Transaction Payment"
                            type="number"
                            className="pr-10 mt-4"
                            placeholder={`Tip: ${payment.toString()}`}
                        />
                    )
                }
                default: {
                    return null
                }
            }
        })}
    </div>
)
