Untitled

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function PhoneScreenSummaryBuilder() {
  const [form, setForm] = useState({
    candidateName: "",
    roleTitle: "",
    jobLink: "",
    roleFitNotes: "",
    commNotes: "",
    motivationNotes: "",
    compNotes: "",
    recommendation: "Yes",
    additionalNotes: "",
  });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const generatedSummary = `Candidate: ${form.candidateName}
Role: ${form.roleTitle}
Job Description: ${form.jobLink}

---

ROLE FIT & EXPERIENCE
Notes:
${form.roleFitNotes}

COMMUNICATION & PROFESSIONALISM
Notes:
${form.commNotes}

MOTIVATION & ALIGNMENT
Notes:
${form.motivationNotes}

COMPENSATION & LOGISTICS
Notes:
${form.compNotes}

HIRING RECOMMENDATION
${form.recommendation}

ADDITIONAL NOTES
${form.additionalNotes}`;

  return (
    <div className="p-6 grid gap-4 max-w-3xl mx-auto">
      <h1 className="text-2xl font-semibold">Phone Screen Notes → Hiring Manager Summary</h1>

      <Card>
        <CardContent className="grid gap-3 p-4">
          <input name="candidateName" placeholder="Candidate Name" className="border p-2 rounded" onChange={handleChange} />
          <input name="roleTitle" placeholder="Role Title" className="border p-2 rounded" onChange={handleChange} />
          <input name="jobLink" placeholder="Job Description Link" className="border p-2 rounded" onChange={handleChange} />

          <textarea name="roleFitNotes" placeholder="Role Fit & Experience Notes" className="border p-2 rounded" rows={3} onChange={handleChange} />
          <textarea name="commNotes" placeholder="Communication & Professionalism Notes" className="border p-2 rounded" rows={3} onChange={handleChange} />
          <textarea name="motivationNotes" placeholder="Motivation & Alignment Notes" className="border p-2 rounded" rows={3} onChange={handleChange} />
          <textarea name="compNotes" placeholder="Compensation & Logistics Notes" className="border p-2 rounded" rows={3} onChange={handleChange} />

          <select name="recommendation" className="border p-2 rounded" onChange={handleChange}>
            <option>Yes</option>
            <option>No</option>
          </select>

          <textarea name="additionalNotes" placeholder="Additional Notes" className="border p-2 rounded" rows={3} onChange={handleChange} />
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <h2 className="text-lg font-medium mb-2">Generated Summary (Copy/Paste)</h2>
          <pre className="whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">{generatedSummary}</pre>
          <Button className="mt-3" onClick={() => navigator.clipboard.writeText(generatedSummary)}>
            Copy Summary
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}