Styled Dialog - Copy this React, Mui Component to your project

Service-Provider-Details-Dialog-(components_vetting_service-provider-details-dialog.jsx)-Purpose:-Display-detailed-information-about-a-selected-service-provider.-Components:-Dialog:-A-modal-dialog-that-opens-when-a-user-clicks-on-a-service-provider.-Tabs:-Linked-Services:-Display-a-list-of-services-linked-to-the-service-provider.-Bio:-Show-background-details-of-the-service-provider.-History:-Show-the-history-of-the-service-provider's-vetting-process.-Close-Button:-A-button-to-close-the-dialog.-UI-Details:-The-dialog-should-be-centered-on-the-screen-with-a-max-width-of-4xl.-Use-tabs-for-organizing-the-content-(Linked-Services,-Bio,-History).-Each-tab-should-contain-a-card-with-a-title-and-content-area.-The-close-button-should-be-positioned-at-the-bottom-right-of-the-dialog.-import-{-Dialog,-DialogContent,-DialogHeader,-DialogTitle-}-from-"@/components/ui/dialog";-import-{-Tabs,-TabsContent,-TabsList,-TabsTrigger-}-from-"@/components/ui/tabs";-import-{-Card,-CardContent,-CardHeader,-CardTitle-}-from-"@/components/ui/card";-import-{-Button-}-from-"@/components/ui/button";-export-function-ServiceProviderDetailsDialog({-isOpen,-onClose,-provider-})-{-return-(-<Dialog-open={isOpen}-onOpenChange={onClose}>-<DialogContent-className="max-w-4xl">-<DialogHeader>-<DialogTitle>Service-Provider-Details</DialogTitle>-</DialogHeader>-<Tabs-defaultValue="linked-services">-<TabsList>-<TabsTrigger-value="linked-services">Linked-Services</TabsTrigger>-<TabsTrigger-value="bio">Bio</TabsTrigger>-<TabsTrigger-value="history">History</TabsTrigger>-</TabsList>-<TabsContent-value="linked-services">-<Card>-<CardHeader>-<CardTitle>Service-provider's-services</CardTitle>-</CardHeader>-<CardContent>-{/*-Add-linked-services-content-here-*/}-</CardContent>-</Card>-</TabsContent>-<TabsContent-value="bio">-<Card>-<CardHeader>-<CardTitle>Background-Details</CardTitle>-</CardHeader>-<CardContent>-{/*-Add-bio-content-here-*/}-</CardContent>-</Card>-</TabsContent>-<TabsContent-value="history">-<Card>-<CardContent>-{/*-Add-history-content-here-*/}-</CardContent>-</Card>-</TabsContent>-</Tabs>-<div-className="flex-justify-end">-<Button-onClick={onClose}>Close</Button>-</div>-</DialogContent>-</Dialog>-);-}