import React from 'react';
import { Head, usePage } from '@inertiajs/react';
import { ChevronLeft } from 'lucide-react';

export default function MissionRules() {
  const { mission } = usePage().props;

  return (
    <>
      <Head title="Rules" />

      <div className="mx-auto min-h-screen max-w-[545px] bg-[#f2f2f2]">
        <div className="relative flex h-[76px] items-center justify-center bg-[#045c5d]">
          <button
            type="button"
            onClick={() => window.history.back()}
            className="absolute left-4 text-[#ffc61a]"
          >
            <ChevronLeft className="h-8 w-8" strokeWidth={2.4} />
          </button>

          <h1 className="text-[27px] font-bold text-[#ffc61a]">Rules</h1>
        </div>

        <div className="px-5 py-6">
          <h2 className="mb-4 border-b border-[#bdbdbd] pb-3 text-[28px] font-semibold text-[#5c5c5c]">
            নতুন সদস্যের দৈনিক চ্যালেঞ্জ
          </h2>

          <div className="max-h-[730px] overflow-y-auto rounded-[12px] border border-[#c6c6c6] bg-[#f7f7f7] p-5 text-[#585858] [&_h2]:mb-6 [&_h2]:text-[18px] [&_h2]:font-bold [&_h3]:mb-6 [&_h3]:mt-16 [&_h3]:text-[18px] [&_h3]:font-bold [&_p]:mb-10 [&_p]:text-[18px] [&_table]:mb-12 [&_table]:border-collapse [&_table]:text-[18px] [&_td]:border [&_td]:border-[#666] [&_td]:p-2 [&_th]:border [&_th]:border-[#666] [&_th]:p-2">
            <div dangerouslySetInnerHTML={{ __html: mission.rules_html }} />
          </div>
        </div>
      </div>
    </>
  );
}