import MetricBar from "./MetricBar"

const LanguagesChart = ({ chartData, error }) => {
	return (
		<div className="bg-sidebar p-3 my-4">
			<div className="text-muted-foreground text-sm pb-2">
				programming languages
			</div>

			{error ? (
				<div>Data could not be found!</div>
			) : !chartData?.length ? (
				<div>No data for time period.</div>
			) : (
				chartData.map((x) => (
					<MetricBar
						key={x.language}
						metric={x.language}
						hours={x.hours}
						percentage={x.percentage}
						color="#458588"
					/>
				))
			)}
		</div>
	)
}

export default LanguagesChart