import { SectionHeading } from "@/components/ui/section-heading"
import { UserProfileBlock } from "@/components/blocks/user-profile-block"
import { ComponentContainer } from "@/components/ui/component-container"

export function UserProfileSection() {
  return (
    <section id="user-profile" className="space-y-6">
      <SectionHeading title="User Profile" description="A card displaying user information and contact details." />

      <ComponentContainer>
        <UserProfileBlock />
      </ComponentContainer>

      <div className="space-y-4">
        <h3 className="text-lg font-medium">Usage Guidelines</h3>
        <div className="bg-muted/30 p-4 rounded-lg space-y-2">
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <strong>Information Hierarchy:</strong> Organize user information with the most important details (name,
              role, avatar) prominently displayed.
            </li>
            <li>
              <strong>Contact Details:</strong> Include relevant contact information with appropriate icons for quick
              visual scanning.
            </li>
            <li>
              <strong>Status Indicators:</strong> Use visual indicators to show online/offline status or other relevant
              user states.
            </li>
            <li>
              <strong>Actions:</strong> Provide clear actions related to the user profile, such as messaging or viewing
              full details.
            </li>
            <li>
              <strong>Badges & Tags:</strong> Use badges to highlight skills, departments, or other categorizations
              relevant to the user.
            </li>
            <li>
              <strong>Consistency:</strong> Maintain consistent styling and information structure across all user
              profiles in your application.
            </li>
            <li>
              <strong>Privacy:</strong> Consider which information should be publicly visible versus restricted to
              certain user roles.
            </li>
            <li>
              <strong>Accessibility:</strong> Ensure all information is accessible, with proper contrast and text
              alternatives for images.
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}