"use client";

import React from 'react';
import { SegmentedBarWidget, type SegmentedBarItem } from '@photonix/ultimate';

const items: SegmentedBarItem[] = [
    { 
        id: 'needs', 
        label: 'Needs', 
        value: 45, 
        color: 'var(--color-blue-500, #3b82f6)' 
    },
    { 
        id: 'transportation', 
        label: 'Transportations', 
        value: 20, 
        color: 'var(--color-cyan-500, #06b6d4)' 
    },
    { 
        id: 'entertainment', 
        label: 'Entertainment', 
        value: 10, 
        color: 'var(--color-amber-500, #f59e0b)' 
    },
];

export default function SegmentedBarWidgetBasicExample() {
    return (
        <div style={{ maxWidth: '420px', margin: '0 auto', width: '100%' }}>
            <SegmentedBarWidget
                title="Income Breakdown"
                valueLabel="37%"
                valueDescription="Spent"
                subValueLabel="$2,450.00 left"
                trend={{
                    value: "12%",
                    label: "last month",
                    direction: "up"
                }}
                items={items}
                total={100}
                onInfoClick={() => {}}
                onMoreClick={() => {}}
            />
        </div>
    );
}