import { formData } from "../../mock_data/settings.data";
import TextField from "../text-field/text-field";
import Typography from "../typography/typography";

const Form = () => {
    return (
        <form className="divide-y border-t">
            {formData.map(data => (
                <div className="flex items-center py-5 space-x-8 ">
                    {/* left section */}
                    <div className="max-w-[280px] w-full">
                        <Typography size="sm" weight="medium" color="gray-700">
                            {data.title}
                        </Typography>
                        <Typography size="sm" color="gray-500">
                            {data.subTitle}
                        </Typography>
                    </div>
                    {/* right section */}
                    <div className="max-w-[512px] w-full">
                        <TextField
                            type={data.type}
                            variant="outlined"
                            color="primary"
                            fullWidth
                        />
                    </div>
                </div>
            ))}
        </form>
    );
};

export default Form;