"use client"
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import PageContainer from "../layout/page-container";
import { Upload } from "lucide-react";
import EnhancedData from "../common/card/enhanced-card";
import NotesCard from "../common/card/notes-card";

const GenCallScript = () => {

  return (
    <PageContainer>
      <div className="mb-4">
        <p className="text-2xl font-semibold mb-1">Generate call script</p>
        <p className="text-base text-gray font-normal">Your personalized call script for engaging with candidates.<br/>
          Upload resume to get a more detailed questions.</p>
      </div>
      <div className="grid grid-cols-12 gap-4">
        {/* Email Generator Section */}
        <div className="col-span-12 lg:col-span-8">
          <Card >
            <CardContent className="flex flex-col items-center justify-center py-9 px-11">
              <div className="border-2 border-dashed  w-full border-primary rounded-lg  flex flex-col items-center justify-center py-6">
                <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-4">
                  <Upload className="h-6 w-6 text-blue-500" />
                </div>
                <p className="text-blue-500 cursor-pointer mb-1">
                  Upload.pdf
                </p>

              </div>
              <div className='flex justify-end w-full mt-3 '>
                <Button variant="default" className='text-white bg-gray py-2 ' >Generate script</Button>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* AI Results and Notes Section */}
        <div className="col-span-12 lg:col-span-4">
          <div className="space-y-4">
            {/* AI Results Section */}
            <EnhancedData />
            {/* Notes Section */}
            <NotesCard />
          </div>
        </div>
      </div>


    </PageContainer>
  );
}


export default GenCallScript;