"use client";

import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function MessagesPage() {
  return (
    <ThemedLayout theme="terminal" siteTitle="ENCRYPTED COMMS" siteSubtitle="Chat (read-only)">
      <section className="container mx-auto max-w-6xl px-4 py-12">
        <h1 className="text-4xl font-bold mb-8 theme-accent">ENCRYPTED COMMS</h1>
        <div className="theme-card p-8 rounded-2xl max-w-2xl mx-auto h-[600px] flex flex-col">
          <div className="flex-1 overflow-y-auto space-y-4 pr-4">
            <div className="theme-card p-4 rounded-lg rounded-tl-none w-3/4">
              <p className="text-sm theme-accent font-bold mb-1">Agent 47</p>
              <p>Did you get the cyber-mustard?</p>
            </div>
            <div className="theme-card p-4 rounded-lg rounded-tr-none w-3/4 self-end ml-auto border-2 border-current/50">
              <p className="text-sm font-bold mb-1 text-right">You</p>
              <p className="text-right">Yeah, it pairs well with the digital salami.</p>
            </div>
            <div className="theme-card p-4 rounded-lg rounded-tl-none w-3/4">
              <p className="text-sm theme-accent font-bold mb-1">Agent 47</p>
              <p>Good. Route the next handoff through the usual dead-drop chain. Watch the canary before you commit funds.</p>
            </div>
          </div>
          <div className="mt-6 pt-6 border-t border-current/20 flex gap-4">
            <input type="text" disabled placeholder="End-to-end encrypted (read-only mode)..." className="theme-card flex-1 rounded-full px-6 py-3 opacity-70" />
            <button disabled className="theme-card px-6 py-3 rounded-full opacity-50 cursor-not-allowed">SEND</button>
          </div>
        </div>
      </section>
    </ThemedLayout>
  );
}