يتم إعطاؤك مقتطفًا برمجيًا يوضح استخدام مكتبة التصميم. تحدد المكتبة مكون "الزر" الذي تم تصميمه باستخدام وظيفة "النمط" من المكتبة.

تأخذ الدالة "المصممة" وسيطتين: "المكون" وكائن فارغ. تقوم بإرجاع مكون جديد تم تصميمه بناءً على القواعد المتوفرة.

يحدد مقتطف الشفرة أيضًا حالة اختبار حيث يتوقع أن يتم تعيين "displayName" لمكون "Button" بشكل صحيح. القيمة المتوقعة هي `'styled(${Component.displayName})''، حيث يجب أن يكون `Component.displayName` هو نفس اسم عرض المكون الأصلي.

بالإضافة إلى ذلك، يحدد مقتطف التعليمات البرمجية وظيفة `createStyled` التي تأخذ كائنًا كوسيطة. يحتوي هذا الكائن على خاصيتين: `showFriendlyClassnames` و`نقاط التوقف`. خاصية "نقاط التوقف" هي كائن يحدد نقطتي توقف: "breakpointOne" و"breakpointTwo". كل نقطة توقف هي دالة تأخذ قاعدة كوسيطة وتقوم بإرجاع سلسلة استعلام وسائط مع تطبيق القاعدة.

مهمتك هي:
1. اكتب دالة، `getButtonDisplayName`، والتي تأخذ `Component` كوسيطة وترجع اسم العرض المتوقع لمكون `Button` المصمم باستخدام `Component`.

2. اكتب دالة، "getMediaQuery"، تأخذ "اسم نقطة التوقف" و"قاعدة" كوسيطتين وترجع سلسلة استعلام وسائط مع تطبيق "القاعدة" المقدمة بناءً على "اسم نقطة التوقف". سيكون `breakpointName` واحدًا مما يلي: ``breakpointOne'' أو ``breakpointTwo''.

قم بتنفيذ كلتا الوظيفتين في JavaScript.
{"source": "argilla/DistiCoder-dpo-binarized", "kind": "synthetic", "evolved_from": null}