Accordion with disabled items and highlighted state

<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const items = [
  {
    value: "item-1",
    trigger: "Can I access my account history?",
    content:
      "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
    disabled: false,
  },
  {
    value: "item-2",
    trigger: "Premium feature information (Locked)",
    content: "This section contains information about premium features. Upgrade your plan to access this content.",
    disabled: true,
  },
  {
    value: "item-3",
    trigger: "How do I update my email address?",
    content:
      "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
    disabled: false,
  },
]
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Accordion type="single" collapsible default-value="item-1" class="border-border rounded-lg overflow-hidden border">
      <AccordionItem
        v-for="item in items"
        :key="item.value"
        :value="item.value"
        :disabled="item.disabled"
        class="data-[state=open]:bg-muted/50 **:data-[slot=accordion-content]:p-0!"
      >
        <AccordionTrigger class="px-4 py-4 hover:no-underline">{{ item.trigger }}</AccordionTrigger>
        <AccordionContent class="px-4! pt-0 pb-4">{{ item.content }}</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>