creating dynamic sustainabilty info

& item details refactor

components/product/sustainability-info.tsx

@@ -1,20 +1,28 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { credentials, credentialsKeys } from "constants/sustainability";
 
+
 export function SustainabilityInfo() {
   return (
     <>
       <div>
           <p className='font-bold mt-6'>Credentials:</p>
-          <ul className='mt-2'>
+          <Accordion type="single" collapsible>
             {credentialsKeys.map(credential => (
-              <li 
-              key={credential}
-              id={credential}
-              >
-                {credentials[credential as keyof typeof credentials].title}
-              </li>
+              <AccordionItem id={credential} key={credential} value={credential}>
+                <AccordionTrigger className="text-sm py-3">{credentials[credential as keyof typeof credentials].title}</AccordionTrigger>
+                <AccordionContent>
+                  "{credentials[credential as keyof typeof credentials].excerpt}" <br /><br/>
+                  <a className="text-bold pt-6" href={credentials[credential as keyof typeof credentials].link}>Read more</a>
+                </AccordionContent>
+              </AccordionItem>
             ))}
-          </ul>
+          </Accordion>
         </div>
     </>
   )