import type { Metadata } from "next";
import { PenLine, Save, Eye } from "lucide-react";

export const metadata: Metadata = { title: "Write Journal" };

export default function NewJournalPage() {
  return (
    <div className="min-h-screen bg-neutral-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-10">
        <div className="flex items-center justify-between mb-8">
          <h1 className="text-2xl font-bold text-navy-800 flex items-center gap-2"><PenLine size={22} /> Write a Journal</h1>
          <div className="flex gap-3">
            <button className="flex items-center gap-2 px-4 py-2 border border-neutral-300 rounded-lg text-sm font-medium text-neutral-700 hover:border-navy-400 bg-white">
              <Eye size={15} /> Preview
            </button>
            <button className="flex items-center gap-2 px-4 py-2 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800">
              <Save size={15} /> Publish
            </button>
          </div>
        </div>

        <div className="bg-white rounded-2xl border border-neutral-200 p-8">
          <div className="mb-6">
            <input
              type="text"
              placeholder="Your journal title..."
              className="w-full text-3xl font-bold text-navy-800 placeholder-neutral-300 border-none outline-none bg-transparent"
            />
          </div>
          <div className="flex gap-4 mb-6 pb-6 border-b border-neutral-200">
            <select className="px-3 py-2 border border-neutral-300 rounded-lg text-sm focus:outline-none">
              <option value="">Category</option>
              <option>Career</option>
              <option>Education</option>
              <option>Business</option>
              <option>Lifestyle</option>
              <option>Technology</option>
            </select>
            <input type="text" placeholder="Add tags (comma separated)" className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500" />
          </div>
          <div className="min-h-96">
            <textarea
              placeholder="Start writing your journal post..."
              className="w-full min-h-96 text-neutral-700 text-base leading-relaxed placeholder-neutral-300 border-none outline-none bg-transparent resize-none"
            />
          </div>
        </div>
      </div>
    </div>
  );
}