import { AlertOctagon, Lock, ShieldOff } from 'lucide-react'
import { Admonition } from 'ui-patterns/admonition'

import { DocsButton } from '@/components/ui/DocsButton'
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { DOCS_URL } from '@/lib/constants'

export function RLSDisableModalContent() {
  const { docsRowLevelSecurityGuidePath } = useCustomContent(['docs:row_level_security_guide_path'])

  return (
    <div className="text-sm text-foreground-light grid gap-4">
      <div className="grid gap-1">
        <Admonition
          type="warning"
          layout="horizontal"
          description="This table will be publicly readable and writable. Anyone can edit or delete data in this table."
        />
        <ul className="mt-4 space-y-5">
          <li className="flex gap-3">
            <AlertOctagon size={14} />
            <span>All requests to this table will be accepted.</span>
          </li>

          <li className="flex gap-3">
            <ShieldOff size={14} />
            <span>Auth policies will not be enforced.</span>
          </li>

          <li className="flex gap-3">
            <Lock size={14} className="shrink-0" />
            <div>
              <strong>Before you turn off Row Level Security, consider:</strong>
              <ul className="space-y-2 mt-2">
                <li className="list-disc ml-4">
                  Any personal information in this table will be publicly accessible.
                </li>
                <li className="list-disc ml-4">
                  Anyone will be able to modify, add or delete any row in this table.
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <DocsButton
        abbrev={false}
        className="w-min mt-3"
        href={`${DOCS_URL}${docsRowLevelSecurityGuidePath}`}
      />
    </div>
  )
}
