import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { TabsContent } from "@/components/ui/tabs";
import { AuthContext } from "@/helpers/context/AuthProvider";
import { useContext } from "react";

const UserEmailUpdateTabContent = () => {
  const { user } = useContext(AuthContext)
  return(
    <>
      <TabsContent value="email" className="mt-0">
        <Card>
          <CardHeader>
            <CardTitle>Email Settings</CardTitle>
            <p className="text-sm text-gray-500">
              Manage your email addresses and verification status.
            </p>
          </CardHeader>
          <CardContent className="space-y-6">
            

            <div className="space-y-2">
              <label className="text-sm font-medium">Primary Email Address</label>
              <div className="p-4 border rounded-lg space-y-4">
                <div className="flex items-center justify-between">
                  <span>{user?.email}</span>
                  <span className="text-sm text-green-600">✓ Verified</span>
                  {
                    false && 
                    <Button>Add & Verify</Button>
                  }
                </div>
              </div>
            </div>

            
          </CardContent>
        </Card>
      </TabsContent>
    </>
  )
}

export default UserEmailUpdateTabContent