import React from 'react'
import StudioLayout from '../../Layouts/StudioLayout'
import { usePage } from '@inertiajs/react'

export default function StudioSettings() {
  const { props } = usePage()

  return (
    <StudioLayout title={props.title} subtitle={props.description}>
      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
        <section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
          <h2 className="text-lg font-semibold text-white">System handoff</h2>
          <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-400">Studio now keeps creator workflow preferences in their own surface. This page stays focused on links out to adjacent dashboards and the control points that do not belong in the day-to-day workflow UI.</p>

          <div className="mt-5 grid gap-3 md:grid-cols-2">
            {(props.links || []).map((link) => (
              <a key={link.url} href={link.url} className="rounded-[22px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20 hover:bg-black/30">
                <div className="flex items-center gap-3 text-sky-100">
                  <i className={link.icon} />
                  <span className="text-base font-semibold text-white">{link.label}</span>
                </div>
                <p className="mt-3 text-sm leading-6 text-slate-400">Open the linked dashboard or settings surface without losing the Studio navigation shell as the default control plane.</p>
              </a>
            ))}
          </div>
        </section>

        <section className="space-y-6">
          {(props.sections || []).map((section) => (
            <div key={section.title} className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
              <h2 className="text-lg font-semibold text-white">{section.title}</h2>
              <p className="mt-3 text-sm leading-6 text-slate-400">{section.body}</p>
              <a href={section.href} className="mt-4 inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
                {section.cta}
                <i className="fa-solid fa-arrow-right" />
              </a>
            </div>
          ))}
        </section>
      </div>
    </StudioLayout>
  )
}