import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";

const UserPasswordUpdateTabContent = () => {
  return(
    <TabsContent value="password" className="mt-0">
      <Card>
        <CardHeader>
          <CardTitle>Update Password</CardTitle>
          <p className="text-sm text-gray-500">
            Change your password to keep your account secure.
          </p>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <label className="text-sm font-medium">Current Password</label>
            <Input type="password" required />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">New Password</label>
            <Input type="password" required/>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Confirm New Password</label>
            <Input type="password" required/>
          </div>

          <div className="mx-auto w-fit">
            <Button className="mt-6 w-full md:min-w-[600px] min-w-[300px]  bg-purple-700">Save Changes</Button>
          </div>
        </CardContent>
      </Card>
    </TabsContent>
  )
}

export default UserPasswordUpdateTabContent